Components
Field
Label, description and error for a form control, with the ARIA wiring done for you.
Loading...
Installation
npx shadcn@latest add @fujin/fieldUsage
import {
Field,
FieldDescription,
FieldError,
FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"<Field name="email">
<FieldLabel required>Email</FieldLabel>
<Input type="email" required />
<FieldDescription>We only use this to send receipts.</FieldDescription>
<FieldError />
</Field>What's different from shadcn/ui
shadcn's Field is presentational: nothing links the description or the error to
the input, so a screen reader user who tabs back to an invalid field hears only
its label.
Fujin's Field is built on Base UI's, which generates the ids and sets
aria-describedby and aria-invalid on the control. You never pass id or
htmlFor.
Examples
With react-hook-form
<Controller
name="email"
control={form.control}
render={({ field, fieldState }) => (
<Field name={field.name} invalid={fieldState.invalid}>
<FieldLabel required>Email</FieldLabel>
<Input {...field} type="email" required />
<FieldError errors={[fieldState.error]} />
</Field>
)}
/>Pass invalid to Field and errors to FieldError.
Native validation
<Field name="name">
<FieldLabel>Name</FieldLabel>
<Input required />
<FieldError match="valueMissing">Name is required.</FieldError>
</Field>API Reference
Field
Prop
Type
FieldLabel
Prop
Type
FieldError
Prop
Type