Choice

Binary and small-set choices: checkbox, radio, switch, segmented control and option chips. All five share the rules of card Inputs: accent only on focus, selection and one primary action; a selected toggle is a frame, not a fill (exception: checkbox and radio carry a full accent indicator); controls are flat at rest; width follows content; labels in sentence case; sizes and colours come from tokens.

Which sub for which need

Need	Use	Not
Independent yes/no options in a form, row selection, "select all" with partial state	Checkbox — `<Checkbox>` / `.acrm-check`; styled `.acrm-checkbox` on the right of menu rows	bare `<input type="checkbox">`, a switch inside a form
One of 2–5 options where an option needs more text or a description	Radio — `.acrm-radio-group` > `.acrm-radio` + `.acrm-radio-dot`	bare `<input type="radio">`, two checkboxes that exclude each other
One of 2–5 short labels, view switch in a top bar, form switch in a drawer (`grow`)	Segmented control — `<Segmented>` / `.acrm-segmented`	bespoke button group from `.acrm-btn`, tabs as a mode switch
Setting that applies immediately, settings list row	Switch — `.acrm-switch-row` > `.acrm-switch` (`role="switch"`)	`role="switch"` with a custom class, a checkbox that saves on click
Several values from a small visible set as clickable labels (industries, filter tags)	Option chips — `.acrm-optchips` > `.acrm-optchip` (selected = accent frame)	accent-filled chips, removable chips for toggling
One value from a closed list ≤ ~10, or more values from a closed list	Select / Multi-select (family Select — DS popover, never native `<select>`)	radio group with 10+ options
Values typed by the user	Tag input (family Chips)	option chips with an inline text field

Shared rules (from code and card Inputs)

Sizes: checkbox box 16px; radio dot 18px with an 8px core; switch track 34×20px with a 16px knob; segmented track 30px (2px gutter + 26px segment); option chip 30px. No size props exist — Sizes sections are empty on purpose.
Radius: --radius-xs for the checkbox box and segments, --radius-sm for chips, --radius-pill for the switch track.
Selection colour: checkbox on = --accent fill; radio on = --accent core and border; switch on = --accent track; segmented on = white surface + --shadow-xs; option chip on = --accent frame + --accent-ink text. Mixed checkbox = --fg-muted.
Focus: native inputs (checkbox, radio) and the switch draw a 3px ring color-mix(in srgb, var(--accent) 30%, transparent) on the indicator; buttons (segments, chips) get the foundation outline: 2px solid var(--accent); outline-offset: 1px from ds.css.
Disabled: only the native checkbox has a visual disabled state (browser default). Radio, switch, chips and segments have no disabled style in CSS — known limit across the family.
Validation: pnpm ds:validate:usage flags native checkbox/radio without the DS class (WARN) and a switch without .acrm-switch (HARD).

Legacy card Inputs — what still holds

Harvested from legacy/Inputs.html and checked against apps/web/src/ds.css and apps/web/src/ds/inputs.css:

Still true: "Radio / Segmented — one choice of 2–5; segmented for short labels and view switching, radio when an option needs more text." "Checkbox / Switch — on/off; checkbox in forms and lists, switch for settings that apply immediately." "Option chips — multiple choice from a small set as clickable labels." "Option chip and similar toggles mark selection with a blue frame, not a fill; exception: checkbox/radio have a full accent indicator." "Checkbox focus = ring 30%." Segmented track 30px = 2px gutter + 26px segment; checkbox 16px; --radius-xs for segments and checkbox.
Superseded: the card names .sgb-ck (15px, builder engine) as the checkbox source — the app canon is .acrm-check / .acrm-checkbox at 16px; the 15px sgb value is a known drift noted in ds.css. The card's "Segmented (2) Yes / No" example is an exclusive two-value choice; an on/off setting is a Switch. The card's live catalogue link /ds/inputs on dev is superseded by this site.

Dropdowns and pickers

Select, Multi-select, Combobox, Record select and the picker classification (dropdown types A–D, consolidation candidates) are not part of the Choice family; they are documented with the Select family. The rule that binds both families: dropdowns are always the DS popover, never a native <select>; ≤ ~10 closed items → Select, more or records → Record select, external suggestions → Combobox; the item checkbox in every multi menu is the styled .acrm-checkbox on the right (D6, 22 Aug 2026).

Subcomponents

Source: docs/choice/index.usage.md · GitLab