Field Matrix
Every Field / Input / InputGroup combination side by side, covering input styles, colors, states, groups, and read-only rows.
Mirrors the Figma "Input" page: sweeps for input-style (soft · surface ·
outlined · ghost) and input-color (brand · gray) across both
label-positions (outset · inset), followed by states and
compositions. Use the playground's input-color
knob to check the knob-following section. Individual docs: Field ·
Input ·
InputGroup ·
Input Date.
Input style
soft
surface
outlined
ghost
Input color
brand
soft
surface
outlined
ghost
gray
soft
surface
outlined
ghost
States & compositions
label-position: outset
label-position: inset
Filled
With description
We never share your email.
We never share your email.
Invalid + error message
Enter a valid email.
Enter a valid email.
Invalid, outlined
Enter a valid email.
Enter a valid email.
Disabled
Disabled, outlined
Read-only input (readOnly attr)
Group: unit addon
Group: leading icon + unit
Group: outlined
Group: invalid
Price must be positive.
Price must be positive.
Group: disabled
Group: icon button addon
Bare inputs, no Field (aria-label)
Knob-following, no props (switch the playground's input-color knob)
Label-less search bars
Read-only value rows (FieldValue)
Serial number
WB-2041-8845
Account email
you@email.com
Serial number
WB-2041-8845
Truncated (hover for title)
big-email-address-with-name@email.com
Input types