Field

Installation

The component depends on the Label component. Add it first.

Copypnpm dlx shadcn@latest add https://neobrutalism.dev/r/field.json

Usage

Copyimport {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldTitle,
} from '@/components/ui/field'

Copy<FieldSet>
  <FieldLegend>Profile</FieldLegend>
  <FieldDescription>Update your public profile.</FieldDescription>
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="name">Name</FieldLabel>
      <Input id="name" />
      <FieldDescription>Displayed on your profile.</FieldDescription>
      <FieldError errors={[{ message: 'Name is required.' }]} />
    </Field>
  </FieldGroup>
</FieldSet>

Field accepts an orientation of vertical (default), horizontal or responsive. Set data-invalid on a Field to put it in the error state and data-disabled to dim it.

Examples

Default

Horizontal

Use orientation="horizontal" to place a control next to its label. Wrap the label and description in FieldContent when you have both.

Choice Card

Wrap a Field in a FieldLabel to turn the whole field into a clickable card. The card is highlighted when the control inside it is checked.

With Error

FieldError renders a single message or a list when the errors array contains more than one unique message. It works with react-hook-form's fieldState.error.