Command Palette

Search for a command to run...

Field

A form field wrapper that provides label, description, and error message support with proper accessibility attributes.

We will never share your email.

Installation

npx shadcn add field --registry https://ui.ch.sh/r

Usage

import {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
} from "@/components/ui/field"

export default function Example() {
  return (
    <Field>
      <FieldLabel>Name</FieldLabel>
      <Input placeholder="Your name" />
      <FieldDescription>Enter your full name.</FieldDescription>
      <FieldError>This field is required.</FieldError>
    </Field>
  )
}

Examples

With Error