Field

Installation

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

npx shadcn@latest add https://prototyper-ui.com/r/field.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/field.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/field.json

This will add the following files to your project:

• components/ui/field.tsx

Usage

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

<Field>
  <FieldLabel>Email</FieldLabel>
  <input />
  <FieldDescription>Enter your email address.</FieldDescription>
</Field>

Anatomy

<FieldSet>
  <FieldLegend />
  <Field>
    <FieldLabel>
      {/* input, checkbox, or other control */}
    </FieldLabel>
    <FieldContent>
      <FieldDescription />
      <FieldError />
    </FieldContent>
  </Field>
  <FieldSeparator />
</FieldSet>

Or with FieldGroup for grouped inputs:

<Field>
  <FieldLabel />
  <FieldGroup>
    {/* grouped inputs or controls */}
  </FieldGroup>
  <FieldDescription />
  <FieldError />
</Field>

Examples

This component does not have standalone examples. It is used as a building block within TextField, NumberField, Checkbox, Radio Group, and other form components.

Styling

Data Slots

Use data-slot attributes to target specific parts of the field:

Customization Examples

/* Change label styling globally */
[data-slot="field-label"] {
  @apply text-base font-semibold;
}

/* Style error messages */
[data-slot="field-error"] {
  @apply text-xs font-medium;
}

{/* Override field orientation */}
<Field orientation="horizontal">
  <FieldLabel>Name</FieldLabel>
  <input />
</Field>

API Reference

Field

Root wrapper that provides layout direction and grouping for form controls.

All standard div props are forwarded via ...props.

FieldLabel

Label element that wraps or precedes a form control. Built on the Label component.

All Label props are forwarded via ...props.

FieldTitle

Non-interactive label text rendered as a div instead of a <label>.

All standard div props are forwarded via ...props.

FieldDescription

Descriptive helper text rendered below the control.

All standard p props are forwarded via ...props.

FieldError

Validation error message with live-region semantics.

All standard div props are forwarded via ...props.

FieldGroup

Styled container for grouping multiple inputs or controls.

All standard div props are forwarded via ...props.

FieldContent

Flex column wrapper for description and error message content.

All standard div props are forwarded via ...props.

FieldSet

A <fieldset> element for grouping related fields.

All standard fieldset props are forwarded via ...props.

FieldLegend

Legend element for a fieldset.

All standard legend props are forwarded via ...props.

FieldSeparator

Visual separator between fields, optionally with content.

All standard div props are forwarded via ...props.

Accessibility

Keyboard Interactions

ARIA Attributes

• Field renders with role="group" to semantically group the label, control, and messages.
• FieldError renders with role="alert" and aria-live="polite" so error messages are announced by screen readers when they appear.
• data-orientation is set on the field root to indicate layout direction.
• data-invalid can be set to indicate validation errors.
• data-disabled is set when the field is disabled, and disabled styling propagates to child labels.

Related