GitHub 560+

Field

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

Profile

Enter your profile information below.

This appears on invoices and emails.

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

We'll never share your email.

Write a short bio about yourself.

Select your country of residence.

Personal Information

Enter your personal details below.

You agree to our Terms of Service and Privacy Policy.

Notifications

Choose how you want to be notified.

Field Group

Stack Field components with FieldGroup. Add FieldSeparator to divide them.

Your primary email address.

Or

Your phone number for SMS updates.

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.

Help improve the app by sharing anonymous usage data.

Receive emails about new products and features.

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.

Enter a valid email address.

This email will be used for account notifications.

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.