field/usage

23 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Field with Input example

Example of Field with Input: <Field><FieldLabel htmlFor='name'>Full name</FieldLabel><Input id='name' autoComplete='off' placeholder='Evil Rabbit' /><FieldDescription>This appears on invoices and emails.</FieldDescription></Field>

Field with Switch example

Example of Field with Switch and horizontal orientation: <Field orientation='horizontal'><Switch id='newsletter' /><FieldLabel htmlFor='newsletter'>Subscribe to the newsletter</FieldLabel></Field>

Field with error example

Example of Field with error state: <Field><FieldLabel htmlFor='email'>Email</FieldLabel><Input id='email' type='email' aria-invalid /><FieldError>Enter a valid email address.</FieldError></Field>. Use data-invalid on Field and aria-invalid on Input.

FieldSet with FieldLegend example

Example of FieldSet structure: <FieldSet><FieldLegend>Profile</FieldLegend><FieldDescription>This appears on invoices and emails.</FieldDescription><FieldGroup></FieldGroup></FieldSet>

FieldError with react-hook-form

FieldError accepts an errors array from react-hook-form. When the errors array contains multiple messages, the component automatically renders a list. It also accepts issues from Standard Schema validators like Zod, Valibot, and ArkType by passing the issues array directly.

Field component basic usage example

Basic Field usage with all components: ```tsx import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from "@/components/ui/field" <FieldSet> <FieldLegend>Profile</FieldLegend> <FieldDescription>This appears on invoices and emails.</FieldDescription> <FieldGroup> <Field> <FieldLabel htmlFor="name">Full name</FieldLabel> <Input id="name" autoComplete="off" placeholder="Evil Rabbit" /> <FieldDescription>This appears on invoices and emails.</FieldDescription> </Field> <Field> <FieldLabel htmlFor="username">Username</FieldLabel> <Input id="username" autoComplete="off" aria-invalid /> <FieldError>Choose another username.</FieldError> </Field> <Field orientation="horizontal"> <Switch id="newsletter" /> <FieldLabel htmlFor="newsletter">Subscribe to the newsletter</FieldLabel> </Field> </FieldGroup> </FieldSet> ``` This example shows a profile fieldset with multiple fields, descriptions, error handling, and horizontal orientation.

Field validation example with aria-invalid

Example of a field with validation: ```tsx <Field data-invalid> <FieldLabel htmlFor="email">Email</FieldLabel> <Input id="email" type="email" aria-invalid /> <FieldError>Enter a valid email address.</FieldError> </Field> ```

FieldContent usage for horizontal layouts

FieldContent is a flex column that groups control and descriptions when the label sits beside the control. Use FieldContent to keep descriptions aligned in horizontal layouts.

FieldContent example with checkbox

Example using FieldContent with a checkbox: ```tsx <Field> <Checkbox id="notifications" /> <FieldContent> <FieldLabel htmlFor="notifications">Notifications</FieldLabel> <FieldDescription>Email, SMS, and push options.</FieldDescription> </FieldContent> </Field> ```

FieldLegend label variant example

Example using FieldLegend with the label variant: ```tsx <FieldLegend variant="label">Notification Preferences</FieldLegend> ```

FieldSeparator example with inline content

Example using FieldSeparator: ```tsx <FieldSeparator>Or continue with</FieldSeparator> ```

FieldError with react-hook-form

Example using FieldError with react-hook-form errors: ```tsx <FieldError errors={errors.username} /> ```

FieldGroup with container queries

Example using FieldGroup with container queries for responsive layouts: ```tsx <FieldGroup className="@container/field-group flex flex-col gap-6"> <Field>{/* ... */}</Field> <Field>{/* ... */}</Field> </FieldGroup> ```

Field horizontal orientation example

Example using Field with horizontal orientation: ```tsx <Field orientation="horizontal"> <FieldLabel htmlFor="remember">Remember me</FieldLabel> <Switch id="remember" /> </Field> ```

FieldSeparator accessibility consideration

Apply FieldSeparator sparingly to ensure screen readers encounter clear section boundaries.

Field form integration

See the Form documentation at /docs/forms for building forms with the Field component and React Hook Form, Tanstack Form, or Formisch.

Field component imports

The Field component exports the following items for import: Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle from '@/components/ui/field'

Field validation with data-invalid and aria-invalid

To mark a field as invalid, add data-invalid to the Field component to switch the entire block into an error state, and add aria-invalid on the input itself for assistive technologies. Render FieldError immediately after the control or inside FieldContent to keep error messages aligned.

Field vertical layout default

Vertical fields are the default orientation and stack label, control, and helper text vertically, ideal for mobile-first layouts.

Field horizontal layout orientation

Set orientation='horizontal' on Field to align the label and control side-by-side. Pair with FieldContent to keep descriptions aligned.

Field responsive layout orientation

Set orientation='responsive' on Field for automatic column layouts inside container-aware parents. Apply @container/field-group classes on FieldGroup to switch orientations at specific breakpoints.

Field usage example with multiple components

Example showing a complete FieldSet with FieldLegend, FieldDescription, and FieldGroup containing multiple Fields with Input, Switch controls, along with FieldLabel, FieldDescription, and FieldError elements. The Switch field uses orientation='horizontal'.

Field choice card pattern

Wrap Field components inside FieldLabel to create selectable field groups. This works with RadioItem, Checkbox, and Switch components.

Give your agent this brain