Field

Installation

pnpm dlx shadcn@latest add @paneui/field

Usage

import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field"

<Field invalid={!!error}>
  <FieldLabel>Email</FieldLabel>
  <Input type="email" />
  <FieldDescription>We never share it.</FieldDescription>
  <FieldError>{error}</FieldError>
</Field>

Composition

FieldGroup
└── Field
    ├── FieldLabel (or FieldLabelRow)
    ├── Input / Select / FieldControl
    ├── FieldDescription
    └── FieldError

Examples

Sizes

Any Control

Validation

Validate however you like and pass the message to FieldError; it renders only while it has children. invalid on Field sets aria-invalid on the control, which turns its ring destructive.

Accessibility

The field links the label to the control and the description and error to it with aria-describedby.

API Reference

Built on the Field primitive. Only the props this library adds or changes are listed; everything else passes through.

Also accepts every prop of Field.Root.

size: "xs" | "sm" | "default" | "lg"; Sizes the label and every control inside (Input, Textarea, PasswordInput, Select and Combobox triggers, MultiSelect, Checkbox, Radio, Switch, Slider). A control's own size wins.
invalid: boolean; Marks the control invalid.
disabled: boolean; Disables the control and dims the label.

Prop	Type	Default	Description
size	"xs" \| "sm" \| "default" \| "lg"	—	Sizes the label and every control inside (Input, Textarea, PasswordInput, Select and Combobox triggers, MultiSelect, Checkbox, Radio, Switch, Slider). A control's own `size` wins.
invalid	boolean	—	Marks the control invalid.
disabled	boolean	—	Disables the control and dims the label.

data-size: The resolved size.

Data attribute	Description
data-size	The resolved size.

FieldError

The message; nothing renders while it is empty. Also accepts every prop of Field.Error.

children: ReactNode; The message.

Prop	Type	Default	Description
children	ReactNode	—	The message.

FieldControl

Makes any element a field control via render. Also accepts every prop of Field.Control.

FieldLabelRow

Label with something at the end, e.g. a "Forgot password?" link. Also accepts every prop of div.

FieldGroup

Stacks fields 16px apart. Also accepts every prop of div.