GitHub

Go to...

Choose a page to open.

Layout parts that combine a label, a control, help text, and an error message.

Field

field-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/field.json

Usage

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field";
<Field>
  <FieldLabel htmlFor="name">Full name</FieldLabel>
  <Input id="name" />
  <FieldDescription>The courier sees this name.</FieldDescription>
  <FieldError>Enter your full name.</FieldError>
</Field>

Examples

Invalid

Set data-invalid on Field and aria-invalid on the control.

field-invalid

Horizontal

Set orientation="horizontal" to put the control beside its label. Wrap the label and the description in FieldContent.

field-horizontal