Chip | Glaze design system

Kind

When to use it

Use: Values a person added and can take back: stop sequences, tags, recipients, allowed domains.
Use: Filters over a list that can be on together, each with how many items it matches.
Not for: One view of several, exactly one at a time. Use Segmented control.
Not for: A status or a label nobody acts on: use a badge.
Not for: An action that starts something. Use Button.

6 rules

Must: Put removable chips in a ChipGroup, and pass focusAfterEmpty pointing at the field that adds them. Because the group is the scope removal moves focus within, and without focusAfterEmpty removing the last chip drops focus to the page.
Must: Make a chip removable with onRemove, never with a Button or an icon placed inside it. Because onRemove gives a named remove button, Backspace and Delete, and moves focus to the next chip.
Must: Put a number in count, not in the label. Because count sets tabular figures in text-2, so the label stays the name and the number reads as a number.
Never: Put glass or ink on a chip, on or off. Because glass marks the action a group leads with, and a row of filters has no lead; on is the pressed wash and the darker line.
Should: Mark a value the field will not take with invalid, and say why in the Field's error.
Should: Keep a chip's label to one to three words; it ends in an ellipsis past its row.

7 states, highest first

5 checks

: A filter chip is a toggle button with aria-pressed; on also reads from the wash and the darker line.
: A removable chip is text with a remove button named "Remove" and the value; Backspace and Delete on it remove too.
: After a removal, focus moves to the next remove button, else the previous, else focusAfterEmpty.
: An invalid chip adds "(not accepted)" for a screen reader beside the coral line.
: Focus is the 2px ink ring on the chip or on its remove button.

2 keys

5 edge cases

Long value: Ends in an ellipsis; the remove button keeps its size and its full name.
Last chip removed: Focus goes to focusAfterEmpty, usually the field that adds values.
Many chips: The group wraps onto more lines, 4px apart.
Chip inside a 32px field: It sits 3px inside the line, concentric with the pill.
Dark theme: Paper turns near-black; on takes the light wash.

7 props

18 tokens