Field

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

Installation

npx shadcn@latest add @fulldev/field

Usage

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldTitle,
} from "@/components/ui/field"
<FieldSet>
  <FieldLegend>Profile</FieldLegend>
  <FieldGroup>
    <Field>
      <FieldLabel for="name">Full name</FieldLabel>
      <Input id="name" placeholder="Evil Rabbit" />
      <FieldDescription>Optional helper text.</FieldDescription>
    </Field>
  </FieldGroup>
</FieldSet>

Composition

Use the following composition for a single field with a label, control, helper text, and validation:

Field
├── FieldLabel
├── Input / Textarea / Switch / Select
├── FieldDescription
└── FieldError

Use FieldGroup to group related fields. Add FieldSeparator between sections when needed.

FieldGroup
├── Field
│   ├── FieldLabel
│   ├── Input / Textarea / Switch / Select
│   ├── FieldDescription
│   └── FieldError
├── FieldSeparator
└── Field
    ├── FieldLabel
    └── Input / Textarea / Switch / Select

Use FieldSet and FieldLegend for semantic grouping:

FieldSet
├── FieldLegend
├── FieldDescription
└── FieldGroup
    ├── Field
    │   ├── FieldLabel
    │   ├── Input / Textarea / Switch / Select
    │   ├── FieldDescription
    │   └── FieldError
    └── Field
        ├── FieldLabel
        └── Input / Textarea / Switch / Select

Anatomy

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

<Field>
  <FieldLabel for="input-id">Label</FieldLabel>
  <!-- Input, Select, Checkbox, etc. -->
  <FieldDescription>Optional helper text.</FieldDescription>
</Field>
  • Field is the core wrapper for a single field.
  • FieldContent is a flex column that groups label and description. Not required if you have no description.
  • Wrap related fields with FieldGroup, and use FieldSet with FieldLegend for semantic grouping.

Examples

Field Group

Stack Field components with FieldGroup. Add FieldSeparator 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 FieldContent to keep descriptions aligned.
  • Responsive fields: Set orientation="responsive" for automatic column layouts inside container-aware parents. Apply @container/field-group classes on FieldGroup to switch orientations at specific breakpoints.

Validation

Add data-invalid="true" to Field to switch the entire block into an error state, and add aria-invalid="true" on the input itself for assistive technologies.

Accessibility

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

API Reference

See the GitHub source code for more information on props.