import { Input } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"
const Demo = () => {
return (
<Field label="Email">
<Input placeholder="me@example.com" />
</Field>
)
}
Setup
If you don't already have the snippet, run the following command to add the
field snippet
chakra snippet add fieldThe snippet includes a closed component composition for the Field component.
Usage
import { Field } from "@/components/ui/field"<Field>
<Input />
</Field>Examples
Error Text
Use the invalid and errorText to indicate that the field is invalid.
import { Input } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"
const Demo = () => {
return (
<Field label="Email" invalid errorText="This is an error text">
<Input placeholder="me@example.com" />
</Field>
)
}
Helper Text
Use the helperText prop to add helper text to the field.
import { Input } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"
const Demo = () => {
return (
<Field label="Email" helperText="This is a helper text">
<Input placeholder="me@example.com" />
</Field>
)
}
Horizontal
Use the orientation="horizontal" prop to align the label and input
horizontally.
import { Input, Stack } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
const Demo = () => {
return (
<Stack gap="8" maxW="sm" css={{ "--field-label-width": "96px" }}>
<Field orientation="horizontal" label="Name">
<Input placeholder="John Doe" flex="1" />
</Field>
<Field orientation="horizontal" label="Email">
<Input placeholder="me@example.com" flex="1" />
</Field>
<Field orientation="horizontal" label="Hide email">
<Switch />
</Field>
</Stack>
)
}
Disabled
Use the disabled prop to disable the field.
import { Input } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"
const Demo = () => {
return (
<Field label="Email" disabled>
<Input placeholder="me@example.com" />
</Field>
)
}
Textarea
Here's how to use the field component with a textarea.
import { Textarea } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"
const Demo = () => {
return (
<Field label="Email">
<Textarea placeholder="Email" />
</Field>
)
}
Native Select
Here's how to use the field component with a native select.
import { Field } from "@/components/ui/field"
import {
NativeSelectField,
NativeSelectRoot,
} from "@/components/ui/native-select"
const Demo = () => {
return (
<Field label="Email">
<NativeSelectRoot>
<NativeSelectField items={["Option 1", "Option 2", "Option 3"]} />
</NativeSelectRoot>
</Field>
)
}
Required
Use the required prop to indicate that the field is required.
import { Input } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"
const Demo = () => {
return (
<Field label="Email" required>
<Input placeholder="me@example.com" />
</Field>
)
}
Optional
Use the optionalText prop to indicate that the field is optional.
import { Badge, Input } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"
const Demo = () => {
return (
<Field
label="Email"
optionalText={
<Badge size="xs" variant="surface">
Optional
</Badge>
}
>
<Input placeholder="me@example.com" />
</Field>
)
}
Props
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. |