Field

Composition preview

Try Field alongside its related fields & validation components. These examples keep all actions local.

Usage

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

<>
<Field data-invalid={invalid}>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" type="email" aria-invalid={invalid} aria-describedby="email-error" />
  <FieldError id="email-error">{invalid ? "Enter a valid email." : null}</FieldError>
</Field>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

FieldGroup, FieldSet, FieldLegend, FieldLabel, FieldDescription, FieldError; data-invalid; data-disabled

Usage & accessibility

Set aria-invalid on the control and connect help/error IDs with aria-describedby.

Implementation contract

src/components/ui/field.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.