Forms

9 components

Pick the control by how many options there are. Two that are on or off is a Switch; two to four mutually exclusive views is a ToggleGroup; two to seven stable options is a Select; more than that is a multi-select or a search field. Every input has a Label, even where the design hides it.

Input

Default · 36px, transparent fill

With a leading icon · 14px, 12px from the edge

Numeric · right-aligned, mono, sized to its content

Invalid · a full-opacity 3px ring. A state you are meant to SEE

Disabled · three changes, never opacity

Field · the label, the control, its help and its error, wired together

Checkbox · a boolean that waits for Save

A Switch applies immediately; a Checkbox is part of a form you submit

Include non-metro countiesOnly coveredRequired by the contract

Textarea · when one line is not enough

What is wrong

Select · 2 to 7 stable options

default

Multi-select · checkboxes, select all, select none

The trigger states the COUNT and the noun, never a list of truncated labels

FL, TX

Switch · applies immediately

A switch that needs a Save button is a checkbox

Display ROOFINGCompact rowsRoot admin · set in the repository

Slider · when the shape matters more than the number

66%