DocsComponents
Chip toggle
Multi-select chips for filters and forms.
Mon Tue
- 1Hidden native checkbox or radio; the label is the 44 px target
- 2Visible pill: 32 px high, min. 44 px wide, 1.5 px border in the foreground token
- 3Text 14 px / 500; short form, full name in the accessible label
- 4Checked: deep blue fill and border, light text
Variants
The same pill in two roles. As a checkbox it picks several values from a set; as a radio it picks exactly one.
States
Hover and focus are forced below so they show without a mouse; the chips above react to the real pointer and keyboard.
Rest Hover Checked Focus Disabled
API reference
Props of ChipToggle.
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | – | Required. Links the visible pill to the hidden input. |
label | string | – | Required. Full name for screen readers, e.g. “Monday” for the chip “Mon”. |
children | node | – | Required. The short visible text of the chip. |
type | "checkbox" | "radio" | "checkbox" | Checkbox: several from a set (days, filters). Radio: one from a set, inside a radio group (quick date choice). |
disabled | boolean | false | 45 % opacity; pair it with aria-describedby pointing to a hint that says why. |
…input attributes | checked, onChange, name… | – | Any native input attribute except type and children passes through. |
Accessibility
- A real checkbox or radio under the pill: Space toggles it, arrow keys move inside a radio group, state is announced.
- The pill is 32 px high, but the label around it gives a 44 px touch target.
- Short text on screen, full name for screen readers: “Mon” is read as “Monday”.
- Checked changes fill, border and text, not only the hue. Focus: 3 px outline in the ring token, 2 px offset.
- Contrast: text 20.2:1 on the white pill, checked 7.6:1, border 18.3:1 against the page background.
- A disabled chip gets aria-describedby pointing to a hint that explains why it is unavailable.