StorybookGitHub

Field

Combine labels, controls, descriptions, and errors into accessible form fields.

We will never share your email.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/field.json

Usage

Use field primitives to structure form controls with consistent labels, help text, and validation errors.

import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/field/field";
import { Input } from "@/components/input/input";

export function Example() {
  return (
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="email">Email</FieldLabel>
        <Input id="email" type="email" placeholder="you@example.com" />
        <FieldDescription>We will never share your email.</FieldDescription>
      </Field>
    </FieldGroup>
  );
}

Orientations: vertical (default), horizontal, and responsive (stacks until the @md/field-group breakpoint). Use FieldError with errors for form libraries, or pass children. FieldSet + FieldLegend group related controls; FieldSeparator divides sections.