Field

A form field with a label, control, and validation message.

Profile

Update your public profile information.

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/field.json

Usage

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

<FieldSet className="w-full max-w-md">
  <FieldLegend>Profile</FieldLegend>
  <FieldDescription>Update your public profile information.</FieldDescription>
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="field-name">Name</FieldLabel>
      <Input id="field-name" placeholder="Evil Rabbit" />
      <FieldDescription>This is your public display name.</FieldDescription>
    </Field>
    <Field>
      <FieldLabel htmlFor="field-email">Email</FieldLabel>
      <Input id="field-email" placeholder="you@example.com" type="email" />
    </Field>
  </FieldGroup>
</FieldSet>

Invalid

Set data-invalid on Field and render FieldError to surface a validation message.