Shadcn Field Components

Shadcn Field Component

The Shadcn Field component is the layout layer for forms. It pairs a control, such as an input, select, checkbox or slider, with its label, helper text and error message, and it groups related fields into sections with a legend. Every form needs this structure, and getting it consistent across a whole app is what makes forms feel finished.

A complete checkout form, a fieldset with a legend for addresses, radio cards for plans and a settings row with a switch show the shadcn field component in real forms. Field is plain, semantic HTML styled with shadcn/ui, React and Tailwind CSS, so it pairs with form controls from both Radix UI and Base UI.

What is the Shadcn Field Component?

Field is not an input. It is a set of small wrappers that handle spacing, alignment and states around the inputs you already use. A Field stacks its label, control and description vertically, or places them on one row with orientation="horizontal". FieldSet and FieldLegend render a real fieldset and legend, so groups of checkboxes or radios are announced as one question. When a field is invalid, FieldError shows the message and the whole field can switch to the destructive color.

Use Field whenever you build a form by hand or with a form library such as React Hook Form or TanStack Form, since it is library agnostic. The control inside comes from its own component: an Input for text, a Textarea for longer answers, a Select for options, or a Switch for settings. Field only decides how those controls and their text are laid out.

Anatomy of the Shadcn Field

10 Shadcn Field Variants

Each field variant listed here is previewed live at the top of this page, together with its source code and install command.

• Checkout form: A complete payment form with card details, month and year selects, a billing checkbox, comments and submit buttons.
• Input and textarea: Text fields with labels and descriptions placed above or below the control, including a password field and a feedback textarea.
• Select and slider: A department select with helper text, and a price range slider that shows its current values in the description.
• Fieldset with legend: An address section with a legend, description and a two column row for city and postal code.
• Checkbox group: A list of horizontal checkbox fields under a label sized legend, plus a checkbox whose label and description stack in FieldContent.
• Radio options: A subscription plan radio group, and selectable radio cards with a title and description built from FieldLabel.
• Switch: A single horizontal field with a label and a switch, a common pattern on settings pages.

How to Install the Shadcn Field Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a field variant by its name:

npx shadcn@latest add @shadcnuikit/field1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Field Component

Wrap each control in a Field, connect the label with htmlFor and id, and group fields with FieldGroup or a FieldSet. Mark invalid fields with data-invalid on the field and aria-invalid on the control.

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function ProfileForm() {
  return (
    <FieldSet>
      <FieldLegend>Profile</FieldLegend>
      <FieldGroup>
        <Field data-invalid>
          <FieldLabel htmlFor="email">Email</FieldLabel>
          <Input id="email" type="email" aria-invalid />
          <FieldError>Enter a valid email address.</FieldError>
        </Field>
        <Field>
          <FieldLabel htmlFor="username">Username</FieldLabel>
          <Input id="username" />
          <FieldDescription>This is your public name.</FieldDescription>
        </Field>
        <Field orientation="horizontal">
          <Checkbox id="newsletter" />
          <FieldLabel htmlFor="newsletter">Subscribe to updates</FieldLabel>
        </Field>
      </FieldGroup>
    </FieldSet>
  )
}

Why Use the Shadcn Field Component

• Consistent forms: Labels, descriptions and errors get the same spacing and typography in every form, without copying classes around.
• Semantic by default: Real fieldset, legend and label elements give screen readers the structure they need.
• Works with any control: Inputs, selects, textareas, checkboxes, radios, switches and sliders all fit the same layout.
• Library agnostic: Use it with React Hook Form, TanStack Form, server actions or plain state; Field only handles the layout.
• Responsive layouts: orientation="responsive" stacks fields on small containers and puts them on one row when there is room, using container queries.

Common Field Use Cases

• Checkout and payment: Card details, billing addresses and order notes grouped into clear sections.
• Sign up and login: Email and password fields with helper text, errors and a separator before social login buttons.
• Settings pages: Rows of switches and checkboxes with a title and a description for each option.
• Plan selection: Radio cards for pricing plans or environments, where each option has a title and details.
• Filters: Price range sliders and checkbox lists in search and product filter panels.

Customizing the Shadcn Field

Field exposes its state through attributes: data-invalid turns the field red, data-disabled fades the label, and data-orientation tells you the layout. Every part accepts a className, so you can change spacing on a FieldGroup or the width of a label with regular Tailwind classes. Colors come from your theme variables, which you can create with the free Theme Generator.

A selectable card is just a FieldLabel that wraps a horizontal Field:

<RadioGroup defaultValue="pro">
  <FieldLabel htmlFor="plan-pro">
    <Field orientation="horizontal">
      <FieldContent>
        <FieldTitle>Pro</FieldTitle>
        <FieldDescription>For growing teams.</FieldDescription>
      </FieldContent>
      <RadioGroupItem value="pro" id="plan-pro" />
    </Field>
  </FieldLabel>
</RadioGroup>

Field Accessibility

Accessible forms depend on connections between elements, and Field makes them easy to keep. Always link FieldLabel to its control with htmlFor and a matching id, so clicking the label focuses the control and screen readers read the label. Use FieldSet and FieldLegend for groups of checkboxes or radios, because screen readers announce the legend as the name of the group when focus moves into it.

For errors, set aria-invalid on the control and render FieldError, which has role="alert" so the message is announced when it appears. You can also link the description or error to the control with aria-describedby. Field adds no keyboard behavior of its own; focus order follows the controls inside it.

Field Best Practices

• Give every control a visible label; placeholders disappear as soon as users start typing.
• Put format hints such as password rules in FieldDescription before users make a mistake.
• Group related inputs in a FieldSet with a legend instead of using a plain heading.
• Use horizontal fields for checkboxes and switches, and vertical fields for text inputs.
• Show one clear error message per field, right below the control it belongs to.
• Keep long forms short by splitting sections with FieldSeparator or across steps.

Components Related to Field

Shadcn Field FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.