Shadcn Field

A field is one control plus its label, helper text, and error. Use it for checkout, settings, and any form where those four parts should share spacing and invalid styles. FieldSet groups related questions; FieldGroup is just the gap.

Usage

import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} 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" placeholder="Evil Rabbit" />
    </Field>
    <Field orientation="horizontal">
      <Switch id="newsletter" />
      <FieldLabel htmlFor="newsletter">Subscribe to the newsletter</FieldLabel>
    </Field>
  </FieldGroup>
</FieldSet>

orientation is vertical by default. horizontal for a switch or checkbox. responsive follows the FieldGroup container, not the viewport.

Composition

FieldSeparator is a rule between groups. FieldTitle is the label look when there is no control to wire.

Input

Label, input, description. The description can sit above or below the control.

Textarea

Same stack for long text. rows stays on the textarea.

Select

FieldLabel names the trigger. Description sits under the dropdown.

Slider

FieldTitle when there is no input to wire. Put the live value in the description.

Fieldset

FieldSet plus FieldLegend is a real <fieldset>. Use it for an address block.

Checkbox

Horizontal Field, box first, then the label. FieldContent if you need a description.

Radio

One FieldSet, one RadioGroup, a horizontal Field per option.

Switch

Horizontal Field, label then thumb. w-fit so the row does not stretch.

Choice Card

Wrap Field in FieldLabel. The card highlights when the radio or checkbox inside is checked.

Field Group

FieldGroup stacks fields. FieldSeparator draws a rule between sections.

RTL

Wrap with DirectionProvider and dir="rtl". Copy is Arabic; the checkbox stays on the start edge.

Responsive Layout

orientation="responsive" is a column until the FieldGroup is @md wide.

API

FieldLegend

FieldError

FieldLabel

FieldSet is a <fieldset>. FieldGroup is the @container/field-group root. FieldContent, FieldTitle, FieldDescription, and FieldSeparator take className.

Notes

FieldError returns nothing when errors is empty — pass the array through.

With other components

Questions

Related