Skip to content

Field

One form row: label, control, hint and error, wired together. Controls inside take their id, description, error and disabled state from the Field.

Sourcecomponents/field.tsx

With a hint

As it appears on your card.

Invalid (type a full email to clear it)

We send receipts here.

Disabled

Horizontal (label beside the control from sm up)

A group of fields

Billing address

Usage

Field usage
import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/field";import { Input } from "@/components/input";
export function FieldUsage({ error }: { error?: string }) {  return (    <Field invalid={Boolean(error)}>      <FieldLabel>Email</FieldLabel>      <Input type="email" name="email" autoComplete="email" />      <FieldDescription>We only use it for receipts.</FieldDescription>      <FieldError>{error}</FieldError>    </Field>  );}

When to use

Use when

Every form row: wrap the control with FieldLabel, and FieldDescription / FieldError as needed. Group rows with FieldSet + FieldLegend

Don’t use when

Wiring htmlFor, aria-describedby and aria-invalid by hand