Field
Field owns the label, help text and validation message. Input owns the control. They talk through context, so the label actually points at the input and the help text lands in aria-describedby without anyone having to remember.
Anatomy
One useId inside Field wires htmlFor, id, aria-describedby and aria-invalid. Doing that by hand at every call site is where accessibility quietly rots.
Shown to anyone you share the report with.
Validation
The error message carries role=alert so it is announced when it appears. Success is announced politely — a passing field should not interrupt anyone.
That address is already registered.
Address verified.
Sizes
Icons and affixes
An affix is bordered off from the input; an icon is not. That distinction tells you whether the thing is fixed chrome or part of what you typed — it matters most in financial fields where a stray unit changes the number.
Stepper
The steppers are tabIndex={-1} on purpose: keyboard users increment with arrow keys on the input itself, so putting the buttons in the tab order just adds two stops nobody wants.
Textarea and chips
Enter to add, Backspace to remove the last.
Disabled and read-only
Read-only keeps the value selectable and swaps to a dashed border — it is content you can copy. Disabled dims and blocks pointer events entirely.