'use client'
import { Field, Input } from '@saas-ui/react'
export const FieldBasic = () => {
return (
<Field.Root>
<Field.Label>Email</Field.Label>
<Input placeholder="me@example.com" />
</Field.Root>
)
}
import { Field } from '@saas-ui/react/field'<Field.Root>
<Field.Label />
<Field.Control />
<Field.HelperText />
<Field.ErrorText />
</Field.Root>Use the helperText prop to add helper text to the field.
This is a helper text
'use client'
import { Field, Input } from '@saas-ui/react'
export const FieldWithHelperText = () => {
return (
<Field.Root>
<Field.Label>Email</Field.Label>
<Input placeholder="me@example.com" />
<Field.HelperText>This is a helper text</Field.HelperText>
</Field.Root>
)
}
Use the invalid and errorText to indicate that the field is invalid.
This is an error text
'use client'
import { Field, Input } from '@saas-ui/react'
export const FieldWithErrorText = () => {
return (
<Field.Root invalid>
<Field.Label>Email</Field.Label>
<Input placeholder="me@example.com" />
<Field.ErrorText>This is an error text</Field.ErrorText>
</Field.Root>
)
}
Use the disabled prop to disable the field.
'use client'
import { Field, Input } from '@saas-ui/react'
export const FieldWithDisabled = () => {
return (
<Field.Root disabled>
<Field.Label>Email</Field.Label>
<Input placeholder="me@example.com" />
</Field.Root>
)
}
Here's how to use the field component with a textarea.
'use client'
import { Field, Textarea } from '@saas-ui/react'
export const FieldWithTextarea = () => {
return (
<Field.Root>
<Field.Label>Message</Field.Label>
<Textarea placeholder="Enter your message here" />
</Field.Root>
)
}
Here's how to use the field component with a native select.
'use client'
import { Field, NativeSelect } from '@saas-ui/react'
export const FieldWithNativeSelect = () => {
return (
<Field.Root>
<Field.Label>Native Select</Field.Label>
<NativeSelect>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</NativeSelect>
</Field.Root>
)
}
| Prop | Default | Type |
|---|---|---|
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
disabled | booleanIndicates whether the field is disabled. | |
ids | ElementIdsThe ids of the field parts. | |
invalid | booleanIndicates whether the field is invalid. | |
readOnly | booleanIndicates whether the field is read-only. | |
required | booleanIndicates whether the field is required. | |
as | React.ElementTypeThe underlying element to render. | |
unstyled | booleanWhether to remove the component's style. |