States
All five states from Figma — Default, Focus (click in), Filled, Error, Disabled.
Default
Filled
Error
Disabled
Sizes
sm · 32px
md · 40px
lg · 48px
Adornments
Leading and trailing icons are ReactNode props. Error state auto-injects a trailing error icon when no trailingIcon is set.
FormField
Bundles label, input, helper text, and error state into a single self-contained component. Wires htmlFor/id and aria-describedby internally.
We'll never share your email.
That username is already taken.
Read-only — contact support to rotate.
Tokens used
bg/baseInput backgroundbg/disabledDisabled backgroundborder/subtleDefault border coloraction/primaryFocus border colorstatus/errorError border + icon colorborder/disabledDisabled border colorborder-width/baseDefault border width (1px)border-width/boldFocus border width (2px)text/baseInput texttext/subtlePlaceholder + icon colortext/disabledDisabled text + iconradius/mdInput container border radiusspace/3, space/4Horizontal padding by sizebody/sm, body/md, body/lgFont size by size variant