Field

Composable form-field primitives — labels, descriptions, errors, separators, and orientation variants — for any control.

Install

npx shadcn@latest add https://atomx.acau.net/r/field.json

Installing field also pulls in Label and Separator.

Field wraps a single control with FieldLabel, FieldDescription, and FieldError. Group related fields with FieldGroup or a semantic FieldSet + FieldLegend. Use orientation to switch between stacked and inline layouts; set data-invalid="true" on a Field to surface error styling.

<Field>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" type="email" />
  <FieldDescription>We'll never share your email.</FieldDescription>
</Field>

Preview

Stacked field with description

Field with error

Horizontal field with checkbox

Accept terms

Agree to the terms of service.

Field set with legend

Notifications

SMS

Props

Component	Extends	Notes
`Field`	`<div>`	Wraps a control. `orientation` is `"vertical"` (default), `"horizontal"`, or `"responsive"`.
`FieldLabel`	`Label`	Label associated with the field's control.
`FieldDescription`	`<p>`	Supportive copy below the control.
`FieldError`	`<div>`	Renders when `children` provided, or maps `errors[]` to a list.
`FieldContent`	`<div>`	Wraps label + description in horizontal/responsive layouts.
`FieldGroup`	`<div>`	Vertical stack of fields with consistent spacing.
`FieldSet`	`<fieldset>`	Semantic group of related fields.
`FieldLegend`	`<legend>`	Heading for a `FieldSet`. `variant` is `"legend"` (default) or `"label"`.
`FieldSeparator`	`<div>`	Horizontal separator between groups, with optional inline label.
`FieldTitle`	`<div>`	Standalone label appearance without a `<label>` element.