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 field
The 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.
This is an error text
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.
This is a helper text
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>
)
}
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>
)
}