Field

Installation

bunx @prototyperco/cli add field

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

Horizontal

Required

Error

With Select

With Checkbox

Field Group

Fieldset

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;
}

/* Make field groups pill-shaped */
[data-slot="field-group"] {
  @apply rounded-full;
}

{
  /* 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>. Useful when the field does not contain a single focusable control.

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

FieldDescription

Descriptive helper text rendered below the control. Automatically hidden when the field is in an invalid state.

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

FieldError

Validation error message with animated reveal and live-region semantics.

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

FieldGroup

Styled container for grouping multiple inputs or addon elements into a single bordered row.

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

FieldContent

Flex column wrapper for description and error message content. Useful in horizontal layouts to keep description and error stacked beside the control.

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

FieldSet

A <fieldset> element for grouping related fields. Automatically adjusts gap for checkbox-group and radio-group children.

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

FieldLegend

Legend element for a fieldset with size variant support.

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

FieldSeparator

Visual separator between fields, optionally displaying centered text 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, propagating destructive text color to children.
• data-disabled is set when the field is disabled, and disabled styling propagates to child labels.
• FieldLabel with required adds a visual asterisk indicator.

Related