Input

Border and focus-ring colour come from the brand's semantic tokens — switch brands below to see the focus ring shift.

Props

Accessibility

• Pass label rather than placing a placeholder alone — a placeholder is not a substitute for a label; it disappears the moment someone starts typing. Input wires the <label>'s htmlFor to a generated (or your own) id automatically.
• Pass error, don't just style the field red by hand — it sets aria-invalid and aria-describedby on the input and renders the message with a matching id, so screen readers announce it.
• NumberInput, AffixInput, and DateInput all build on the same base — they inherit its label/error/focus/disabled behaviour automatically.

Do / Don't

• Do use error, not helper, for validation messages — helper stays visible and neutral; error replaces it, turns the border red, and is announced.
• Don't disable an input to communicate "not applicable" — prefer removing it or explaining why, since a disabled field with no context reads as broken to screen-reader users.