Field

Accessible label, description, and validation wiring for a single form control. Errors shake in with the seam error pattern; pair with Form for whole-form submission and server errors.

We only use this for receipts.

tsx

import { Field, FieldDescription, FieldLabel } from "@/registry/seam/ui/field"
import { Input } from "@/registry/seam/ui/input"

export default function FieldDemo() {
  return (
    <Field name="email" className="max-w-xs">
      <FieldLabel>Email</FieldLabel>
      <Input type="email" placeholder="you@company.com" />
      <FieldDescription>We only use this for receipts.</FieldDescription>
    </Field>
  )
}

bunx --bun @seamui/cli@latest add field

API

Prop	Type	Default	Description
name	string	—	Identifies the field when a form is submitted.
validate	(value, formValues) => string \| string[] \| null	—	Custom validation — return the error message(s), or null when valid.
validationMode	"onSubmit" \| "onBlur" \| "onChange"	"onSubmit"	When validation runs; takes precedence over the Form's mode.
invalid / disabled	boolean	—	Force the state externally, e.g. from a form library.
FieldError match	boolean \| keyof ValidityState	—	Show only for one native validity condition (e.g. "valueMissing"), or true to control visibility yourself.

Plus all Base UI Field.* props on the matching parts.

Notes

Input is Field-aware on its own — <Field><Input /></Field> wires label, description, and validity automatically. FieldControl renders the seam Input by default; any other control joins through <FieldControl render={<Textarea />} />.
FieldError fires the seam error signal — a shake (an opacity flash under reduced motion) plus the error haptic — when an error appears: on validation after user input, or when a message lands via match / the Form's errors. Errors already present at first paint render statically, and simultaneous field failures coalesce into one haptic. A custom render element keeps the signal.
Without children, FieldError renders the message from validate, the browser's native validity text, or the Form's server errors — stack several with match for per-condition copy.
Fieldset and FieldsetLegend group related fields under one heading; FieldItem labels one option inside checkbox or radio groups (see the Fieldset example).
FieldValidity is a render-prop escape hatch: it exposes the control's raw ValidityState for fully custom messaging, and renders no DOM of its own.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.