Field

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

On this page

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/field

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>

No examples yet.

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

Supports all div attributes.

Prop	Type	Default
	`"horizontal" \| "vertical"`	`'vertical'`

Groups a set of related fields under a common legend.

Supports all fieldset attributes.

Prop	Type	Default

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

Supports all legend attributes.

Prop	Type	Default

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

Supports all div attributes.

Prop	Type	Default

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

Supports all div attributes.

Prop	Type	Default

The label of a field.

Prop	Type	Default

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

Prop	Type	Default

A FieldError displays validation errors for a form field.

Last updated on 6/16/2026