Field

A field wraps form inputs with labels, descriptions, and error messages.

Installation

npx shadcn@latest add @dotui/field

Usage

import { Field, Label, Description, FieldError } from '@/components/ui/field'
<Field>
  <Label>Email</Label>
  <Input type="email" />
  <Description>We'll never share your email.</Description>
</Field>

Anatomy

import {
  Field,
  FieldContent,
  Label,
  Description,
  FieldError,
  FieldGroup,
  Fieldset,
  Legend,
} from '@/components/ui/field'
<Fieldset>
  <Legend>…</Legend>
  <FieldGroup>
    <Field>
      <FieldContent>
        <Label>…</Label>
        <Description>…</Description>
      </FieldContent>
      <FieldError>…</FieldError>
    </Field>
  </FieldGroup>
</Fieldset>

Field wraps a control with its Label, Description, and FieldError. FieldContent stacks the label and description so they can sit beside the control. FieldGroup spaces stacked fields, and Fieldset with Legend semantically groups related fields.

Accessible wiring

Field links the Label (htmlFor), the control (id), and the Description (aria-describedby) through context, so no manual ids are needed. Input-specific wrappers like TextField, Select, and Checkbox do this themselves — reach for Field only around standalone controls like Switch.

<Field>
  <Label>Notifications</Label>
  <Switch>
    <SwitchControl />
  </Switch>
  <Description>Send me product updates.</Description>
</Field>

FieldError renders validation messages and accepts a render function for the current validation state.

Orientation

Set orientation="horizontal" to place the control beside its label, using FieldContent to stack the label and description on the left.

<Field orientation="horizontal">
  <FieldContent>
    <Label>Airplane Mode</Label>
    <Description>Disable all connections.</Description>
  </FieldContent>
  <Switch aria-label="Airplane Mode">
    <SwitchControl />
  </Switch>
</Field>

Examples

Login Form

Enter a valid email address.
At least 8 characters.

Registration Form

This will be your public handle.
At least 8 characters.
You can unsubscribe anytime.

Profile Settings

Used for sign-in and notifications.
Timezone

API Reference

Field

A field wraps a form control with its label, description, and error message.

Supports all div attributes.

PropType
"horizontal" | "vertical"

Fieldset

Groups a set of related fields under a common legend.

Supports all fieldset attributes.

PropType

Legend

The caption of a fieldset, describing its group of fields.

Supports all legend attributes.

PropType

FieldGroup

Contains a stack of fields, applying consistent spacing between them.

Supports all div attributes.

PropType

FieldContent

Contains the label and description of a field, displayed alongside its control.

Supports all div attributes.

PropType

Label

The label of a field.

PropType

Description

The description of a field. Provides a hint or additional context for the control.

PropType

FieldError

A FieldError displays validation errors for a form field.

PropType
ReactNode | function
string

Last updated on 7/9/2026