Field

Component field-demo not found in registry.

Installation

pnpmnpmyarnbun
pnpm dlx createui@latest add field
Copy

Usage

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

Copy<FieldSet>
  <FieldLegend>Profile</FieldLegend>
  <FieldDescription>This appears on invoices and emails.</FieldDescription>
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="name">Full name</FieldLabel>
      <Input id="name" autoComplete="off" placeholder="Evil Rabbit" />
      <FieldDescription>This appears on invoices and emails.</FieldDescription>
    </Field>
    <Field invalid>
      <FieldLabel htmlFor="username">Username</FieldLabel>
      <Input id="username" autoComplete="off" aria-invalid />
      <FieldError>Choose another username.</FieldError>
    </Field>
    <Field orientation="horizontal">
      <Switch id="newsletter" />
      <FieldLabel htmlFor="newsletter">Subscribe to the newsletter</FieldLabel>
    </Field>
  </FieldGroup>
</FieldSet>

Anatomy

Copy<Field size="md">
  <FieldLabel htmlFor="input-id">Label</FieldLabel>
  {/* Input, Select, Switch, etc. */}
  <FieldDescription>Optional helper text.</FieldDescription>
  <FieldHelper icon={<InfoIcon />}>Contextual helper with icon.</FieldHelper>
  <FieldError>Validation message.</FieldError>
  <FieldFooter>
    <a href="#">Learn more →</a>
  </FieldFooter>
</Field>

• Field — container. Provides size, orientation, and invalid/disabled state via context.
• FieldLabel — semantic <label>. Pairs with htmlFor and propagates label sizing.
• FieldContent — flex column to group label + description next to a control (horizontal layouts).
• FieldDescription — helper <p> in neutral tone. Flips to error tone when the field is invalid.
• FieldHelper — icon + text helper row. Accepts tone: "neutral" | "error".
• FieldError — accessible error container (role="alert"). Accepts children or an errors array.
• FieldFooter — trailing CTA slot (inline link, arrow icon) that lives below the control.
• FieldGroup — stack of fields with @container/field-group for responsive orientation.
• FieldSet / FieldLegend — semantic grouping for related fields.
• FieldSeparator — visual divider, optional inline label.

Sizes

Field exposes size: "sm" | "md" | "lg" and propagates it via context to FieldLabel, FieldDescription, FieldHelper, FieldError, and FieldFooter. Override per-child by passing size directly.

Orientation

• vertical (default) — stacks label, control, and helper text.
• horizontal — label and control side-by-side; pair with FieldContent to keep descriptions aligned.
• responsive — stacks on narrow containers, flips to horizontal at the @md/field-group container query breakpoint.

Component field-responsive not found in registry.

Validation and Errors

Set invalid on Field (or the legacy data-invalid attribute) to switch the block into an error state. Add aria-invalid on the control itself for assistive technologies.

Copy<Field invalid>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" type="email" aria-invalid />
  <FieldError>Enter a valid email address.</FieldError>
</Field>

FieldError accepts an errors array from form libraries (React Hook Form, Standard Schema validators like Zod, Valibot, ArkType). Multiple messages render as a list automatically.

Disabled

Set disabled on Field (or the legacy data-disabled attribute) so descendants inherit disabled styling. The control itself still needs its own disabled prop for interaction.

Examples

Input

Component field-input not found in registry.

Textarea

Component field-textarea not found in registry.

Select

Component field-select not found in registry.

Checkbox

Component field-checkbox not found in registry.

Radio

Component field-radio not found in registry.

Switch

Component field-switch not found in registry.

Slider

Component field-slider not found in registry.

Fieldset

Component field-fieldset not found in registry.

Choice Card

Wrap Field components inside FieldLabel to create selectable field groups. Works with Radio, Checkbox, and Switch.

Component field-choice-card not found in registry.

Field Group

Stack Field components with FieldGroup. Add FieldSeparator to divide.

Component field-group not found in registry.

Accessibility

• FieldSet and FieldLegend keep related controls grouped for keyboard and assistive tech users.
• Field outputs role="group" so nested controls inherit labelling from FieldLabel and FieldLegend when combined.
• FieldError uses role="alert" so screen readers announce validation messages as they appear.

API Reference

Field

FieldLabel

Semantic <label> element (Radix Label.Root). Size is inherited from Field context; override with size prop.

FieldDescription

Helper text below the control (<p>). Picks up error tone automatically when the field is invalid.

FieldHelper

Icon + text helper row.

FieldError

Accessible error container (role="alert").

FieldFooter

Trailing inline CTA slot (link, arrow icon). Renders in text-primary-base.

FieldGroup

Vertical stack with @container/field-group for responsive fields.

FieldSet

Semantic <fieldset> container.

FieldLegend

Semantic <legend>. Supports variant: "legend" | "label" (defaults to the section-heading legend).

FieldSeparator

Visual divider with optional inline content.