Field

Form field wrapper combining label, helper text, and error message. Compose with Input, Textarea, and other form controls.

We'll never share your email.

Installation

npx paubha@latest add field

Usage

import { Field } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

<Field label="Email" description="We'll never share your email.">
  <Input placeholder="you@example.com" />
</Field>

Field takes label/description/error as props rather than child slots. That's a deliberate match to how the real spec models it, not a shortcut. The one genuinely swappable part, the control itself, is composed in as children and gets id, aria-describedby, aria-invalid, and error wired onto it automatically.

Examples

Error state

Enter a valid email address.

Disabled

Pass disabled (or set it on the control) to dim the label and helper text.

Contact support to change this.

With Textarea

Field isn't Input-specific: it composes with any control that accepts id/aria-describedby/aria-invalid/error.

Bio

Shown on your public profile.

API reference

Prop	Type	Default	Description
label	ReactNode	—	Linked to the control via for/id.
description	ReactNode	—	Helper text, wired into the control's aria-describedby.
error	ReactNode	—	Error message. When present, sets aria-invalid on the control and adds its id to aria-describedby alongside the description.
required	boolean	—	Appends a literal " *" to the label (aria-hidden) and sets the control's native required attribute.
success	ReactNode	—	Success message shown in place of the description, in fg-success. Ignored while error is set.
disabled	boolean	—	Dims the label and description to fg-disabled and passes disabled to the control. Inferred from the child's own disabled prop when omitted.
children	ReactElement	—	A single form control (Input, Textarea, ...). Receives id, aria-describedby, aria-invalid, error, required, and disabled automatically via cloneElement.

Accessibility

Label. Linked to the control via a generated id and htmlFor. Clicking the label focuses the control.
Helper text. Wired into the control's aria-describedby only when present, so there's never a dangling reference to an element that doesn't exist.
Error. Sets aria-invalid on the control and adds the error message's id to aria-describedby alongside the description, if both are present.

On this page