Toggle Chip
Options you turn on and off, drawn as chips: quick filters (Remote, Full-time), interests, categories. Each chip is a checkbox, or a radio when only one can be on; its value is sent with the form, and it works without scripting. Specification: docs/components/toggle-chip.md
Basics
Each chip is a <label class="canon-toggle-chip"> around its checkbox and a .canon-toggle-chip-label. A set of chips sits in a .canon-toggle-chips with role="group" and a name; it wraps onto more rows. Chosen chips show a check, so the state reads by more than color. Tab moves from chip to chip; Space turns one on or off.
A single chip
One chip on its own needs no group: its label says what it turns on.
Icons
An icon before the text, aria-hidden="true", after the input. When the chip is on, the check takes the icon's place.
One at a time
Radios instead of checkboxes, in a role="radiogroup": choosing one releases the others, and the arrow keys move between them. For a few short options that fit one row, a Segmented Control reads better; chips suit a longer set that wraps.
In a field
In a Field, the set takes the box's place and is named by the field's label: a <span id> the group points at with aria-labelledby.
Pick as many as you like.
Size
data-size on a chip, the set or a container: chips 24 / 32 / 40 tall, a little shorter than a button.
Disabled
disabled on an input: that chip can't change, on or off.
Toggle Chip or…
They can look alike; what they do differs.
- Tag shows something (a status, a category); the one thing it can do is be removed.
- Checkbox suits a list: longer labels, descriptions, a form to read top to bottom.
- Segmented Control picks one of a few short options in one row.
- Button toggles (
aria-pressed) change the interface right away and aren't form values.
Edge cases
Many chips wrap onto more rows; a chip wider than the room cuts its text (…) and keeps its full name. Drag the frame's corner to try it.
Right to left, the chips run from the right.