Field

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

Installation#

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Field
Copy

Usage#

Copy<Field.Set>
  <Field.Legend> {"Profile"->React.string} </Field.Legend>
  <Field.Description> {"This appears on invoices and emails."->React.string} </Field.Description>
  <Field.Group>
    <Field>
      <Field.Label htmlFor="name"> {"Full name"->React.string} </Field.Label>
      <Input id="name" placeholder="Evil Rabbit" />
    </Field>
    <Field orientation=Horizontal>
      <Switch id="newsletter" />
      <Field.Label htmlFor="newsletter"> {"Subscribe to the newsletter"->React.string} </Field.Label>
    </Field>
  </Field.Group>
</Field.Set>

Anatomy#

The Field family is designed for composing accessible forms. A typical field is structured as follows:

Copy<Field>
  <Field.Label htmlFor="input-id"> {"Label"->React.string} </Field.Label>
  {/* Input, Select, Switch, etc. */}
  <Field.Description> {"Optional helper text."->React.string} </Field.Description>
  <Field.Error> {"Validation message."->React.string} </Field.Error>
</Field>

• Field is the core wrapper for a single field.
• Field.Content is a flex column that groups label and description. Not required if you have no description.
• Wrap related fields with Field.Group, and use Field.Set with Field.Legend for semantic grouping.

Form#

See the Form documentation for building forms with the Field component and React Hook Form or Tanstack Form.

Examples#

Input#

Textarea#

Select#

Slider#

Field.Set#

Checkbox#

Radio#

Switch#

Choice Card#

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

Field Group#

Stack Field components with Field.Group. Add Field.Separator to divide them.

Responsive Layout#

• Vertical fields: Default orientation stacks label, control, and helper text—ideal for mobile-first layouts.
• Horizontal fields: Set orientation="horizontal" on Field to align the label and control side-by-side. Pair with Field.Content to keep descriptions aligned.
• Responsive fields: Set orientation="responsive" for automatic column layouts inside container-aware parents. Apply @container/field-group classes on Field.Group to switch orientations at specific breakpoints.

Validation and Errors#

• Add dataInvalid to Field to switch the entire block into an error state.
• Add ariaInvalid on the input itself for assistive technologies.
• Render Field.Error immediately after the control or inside Field.Content to keep error messages aligned with the field.

Copy<Field dataInvalid=true>
  <Field.Label htmlFor="email"> {"Email"->React.string} </Field.Label>
  <Input id="email" type="email" ariaInvalid=true />
  <Field.Error> {"Enter a valid email address."->React.string} </Field.Error>
</Field>

Accessibility#

• Field.Set and Field.Legend keep related controls grouped for keyboard and assistive tech users.
• Field outputs role="group" so nested controls inherit labeling from Field.Label and Field.Legend when combined.
• Apply Field.Separator sparingly to ensure screen readers encounter clear section boundaries.

API Reference#

Field.Set#

Container that renders a semantic fieldset with spacing presets.

Copy<Field.Set>
  <Field.Legend> {"Delivery"->React.string} </Field.Legend>
  <Field.Group>{/* Fields */}</Field.Group>
</Field.Set>

Field.Legend#

Legend element for a Field.Set. Switch to the label variant to align with label sizing.

Copy<Field.Legend variant=Label> {"Notification Preferences"->React.string} </Field.Legend>

The Field.Legend has two variants: Legend and Label. The Label variant applies label sizing and alignment. Handy if you have nested Field.Set.

Field.Group#

Layout wrapper that stacks Field components and enables container queries for responsive orientations.

Copy<Field.Group className="@container/field-group flex flex-col gap-6">
  <Field>{/* ... */}</Field>
  <Field>{/* ... */}</Field>
</Field.Group>

Field#

The core wrapper for a single field. Provides orientation control, invalid state styling, and spacing.

Copy<Field orientation=Horizontal>
  <Field.Label htmlFor="remember"> {"Remember me"->React.string} </Field.Label>
  <Switch id="remember" />
</Field>

Field.Content#

Flex column that groups control and descriptions when the label sits beside the control. Not required if you have no description.

Copy<Field>
  <Checkbox id="notifications" />
  <Field.Content>
    <Field.Label htmlFor="notifications"> {"Notifications"->React.string} </Field.Label>
    <Field.Description> {"Email, SMS, and push options."->React.string} </Field.Description>
  </Field.Content>
</Field>

Field.Label#

Label styled for both direct inputs and nested Field children.

Copy<Field.Label htmlFor="email"> {"Email"->React.string} </Field.Label>

Field.Title#

Renders a title with label styling inside Field.Content.

Copy<Field.Content>
  <Field.Title> {"Enable Touch ID"->React.string} </Field.Title>
  <Field.Description> {"Unlock your device faster."->React.string} </Field.Description>
</Field.Content>

Field.Description#

Helper text slot that automatically balances long lines in horizontal layouts.

Copy<Field.Description> {"We never share your email with anyone."->React.string} </Field.Description>

Field.Separator#

Visual divider to separate sections inside a Field.Group. Accepts optional inline content.

Copy<Field.Separator> {"Or continue with"->React.string} </Field.Separator>

Field.Error#

Accessible error container that accepts children or an errors array (e.g., from react-hook-form).

Copy<Field.Error errors={errors.username} />

When the errors array contains multiple messages, the component renders a list automatically.

Field.Error also accepts issues produced by any validator that implements Standard Schema, including Sury, Zod, Valibot, and ArkType. Pass the issues array from the schema result directly to render a unified error list across libraries.