Docs › Components › Field

Shadcn Field

The shadcn/ui Field lays out a form control with its label, description, and error message in one consistent, accessible structure, styled with Tailwind CSS v4. It gives every field the same spacing and wiring without a validation library. Fields structure forms across ShadcnStore auth and checkout blocks.

Key features

• Consistent label, description, and error layout.
• Groups and sets for organizing related fields.
• Associates help and error text with the control.
• Works with any input, select, or checkbox.
• Pairs with the Form component for validation.

Installation

npx shadcn@latest add field

Usage

import {
  Field,
  FieldLabel,
  FieldDescription,
  FieldGroup,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function Example() {
  return (
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="username">Username</FieldLabel>
        <Input id="username" placeholder="shadcn" />
        <FieldDescription>This is your public display name.</FieldDescription>
      </Field>
    </FieldGroup>
  )
}

Accessibility

• FieldLabel connects to the control; keep htmlFor and id matching.
• Description and error text are associated with the control for screen readers.
• Group related fields with FieldSet and a FieldLegend.

When to use the Field

Use a Field to lay out any labelled form control consistently: text inputs, selects, checkboxes, and switches. For full schema validation, wrap fields in the Form component. For a plain input with no help text, an Input and Label are enough.

Used in these blocks

• Login forms: labelled fields.
• Signup forms: account fields.
• Checkout forms: billing fields.

Related components

A Field wraps an Input, Select, or Checkbox with a Label; for validation use the Form component.

FAQ

What is the shadcn field used for?

The Field lays out a form control with its label, description, and error message in a consistent, accessible structure.

What is the difference between Field and Form?

Field is a layout primitive for one control's label, help, and error. Form wires React Hook Form validation and can render Fields inside.

How do I show a field error?

Render a FieldError with the message; it is associated with the control for assistive tech.

How do I group related fields?

Wrap them in a FieldSet with a FieldLegend, or a FieldGroup for spacing.