New Components
Chips
The chip is a compact visual form, generally a capsule containing a short text and sometimes an icon. It is not a single component: under one and the same appearance, a chip may be a filter turned on and off, or an entered value that can be removed. Each variant belongs to a distinct interaction model and is built with the native button, the appearance being achieved through CSS.
On this page
When to use a chip
- Toggleable filters: offer several criteria the user turns on and off freely, without leaving the page.
- Entered values: show what the user has already added, keywords, recipients, skills, each one removable.
- Short, numerous choices: when the options fit in one or two words and you want them all visible at a glance.
When not to use a chip
- To display a state: a value that can be neither toggled nor removed is a badge.
- For a single, exclusive choice: use radio buttons, whose semantics already say only one answer is possible.
- For a very long list: beyond a dozen entries, prefer a dropdown list with filtering.
Modes of action
- Mouse: a click turns the filter on or off, or removes the value.
- Keyboard: every chip is a native button, reachable with Tab, activated with Enter and Space. On removable chips, Delete and Backspace are an extra shortcut, never the only way.
- Screen reader: the state of a filter is carried by aria-pressed. The accessible name of a removable chip repeats the visible label followed by the action.
Content
- One or two words: the label has to fit on one line and stay readable without its neighbours.
- Distinct labels: two identical chips would share an accessible name and become impossible to tell apart by voice.
- No count in the label: the number of results belongs to the results area, not to the button.
Keywords
- Chip: a small compact button standing for a toggleable filter or a removable value.
- aria-pressed: the state of a toggle button, pressed or not. It only suits a button, never a link.
- Live region: an area whose change is announced without moving focus.
- Accessible name: the text exposed for an element. On a removable chip it combines the label and the action.
Breakdown of the components
Two very different uses share the same look. They are not coded the same way.
Filter chips
- Every chip is a native button carrying aria-pressed. The state is therefore announced by the screen reader as well as being visible.
- The pressed state is not signalled by colour alone: a tick is drawn inside the button (WCAG 1.4.1).
- The number of results is announced after a 500 ms delay, long enough for the screen reader to finish announcing the new state of the chip.
Removable chips
- The accessible name repeats the visible label followed by the action, "WCAG, Remove": voice control stays possible (WCAG 2.5.3).
- After a removal, focus goes to the next chip, or to the text field when the list is empty. It never falls back on the document (WCAG 2.4.3).
- The list carries role="list": without it, removing the markers in CSS drops the list semantics and the number of items is no longer announced.
- A duplicate is refused with a message, rather than being silently ignored.
Screen reader
- A chip is always a button. A link carries no state and cannot be a toggle.
- On a filter, aria-pressed is enough: no extra role, no hidden text describing the state.
- On a removable chip, the action belongs in the accessible name, not only in a decorative cross.
- Every announcement goes through a live region present from page load, and empty.
Both variants rest on the native button: no interaction has to be rebuilt. Every chip is a tab stop.
| Key | Function |
|---|---|
| Tab | Moves focus to the next chip. No roving tabindex: a chip carries a single command. |
| Shift + Tab | Moves focus to the previous element. |
| Enter or Space | Turns a filter chip on or off, whose aria-pressed state is announced. Removes a removable chip. |
| Delete or Backspace | Removes the focused chip. An extra shortcut, never the only way to remove one. |
Note: after a removal, focus goes to the next chip, or to the text field when the list is empty. It never falls back on the document. The confirmation message waits 500 ms, long enough for the screen reader to announce the newly focused element.