Field

Basic

Standard layout: FieldLabel above, control in the middle, FieldDescription below.

Usage

Import the parts you need from the component's folder.

import {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldSet,
  FieldLegend,
  FieldSeparator,
  FieldContent,
  FieldTitle,
} from "@/components/ui/field";

Textarea

Pair a multi-line Textarea with a label and helper text.

Select

Compose a Select control inside a Field, with a description below the trigger.

Slider

Use FieldTitle and FieldDescription to caption a range Slider that reflects the live value.

FieldSet and FieldGroup

Wrap related fields together. FieldLegend gives the section a heading; FieldGroup is a vertical container between fields.

Checkbox

Group horizontal checkbox fields under a FieldLegend, with FieldContent for options that need a description.

Radio

A RadioGroup of horizontal fields inside a FieldSet.

Switch

Horizontal field with FieldContent placing the label and description beside a Switch.

Choice card

Wrap a Field inside FieldLabel to turn each option into a selectable card. The checked card is highlighted automatically.

Horizontal orientation

Label and control on one row. Suits short forms and setting toggles.

Responsive orientation

orientation="responsive" stacks on narrow screens and switches to a row once the FieldGroup container hits its md breakpoint.

Validation and errors

Set data-invalid on Field, aria-invalid on the control, then use FieldError for the message.

API Reference