'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>
)
}
Anatomy
import { Field } from '@saas-ui/react/field'<Field.Root>
<Field.Label />
<Field.Control />
<Field.HelperText />
<Field.ErrorText />
</Field.Root>Examples
Helper Text
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>
)
}
Error Text
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>
)
}
Disabled
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>
)
}
Textarea
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>
)
}
Native Select
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>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'The color palette of the component |
orientation | 'vertical' | 'vertical' | 'horizontal'The orientation of the component |
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. |