Components / Navigation / Filter chips
N5 · Navigation
Filter chips
A single-select chip row. Each chip shows how many records it covers.
<div class="c-chips" role="toolbar" aria-label="Filter">
<button type="button" data-filter="All" aria-pressed="true">All<span class="c-count">12</span></button>
<button type="button" data-filter="Blocked" aria-pressed="false">Blocked<span class="c-count">1</span></button>
</div>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- People narrow one list by a named field.
- The count on each chip is known.
When not to use
- Filters combine many fields. Use a form.
- The list is already split into tab panels.
Usage
<div class="c-chips" role="toolbar" aria-label="Filter">
<button type="button" data-filter="All" aria-pressed="true">All<span class="c-count">12</span></button>
<button type="button" data-filter="Blocked" aria-pressed="false">Blocked<span class="c-count">1</span></button>
</div>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| data-filter | label | All | Value matched against data-status. |
| aria-pressed | true or false | false | The active chip. |
| data-status | label | — | Status on each row. |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves across chips. |
| Enter or Space | Presses the chip. |
Accessibility
- The row is a toolbar with a label.
- Pressed state is aria-pressed, not colour alone.
- Counts sit in the accessible name.
Motion
- Rows show and hide without animation.
Pattern origin
Pattern type: filter chips that show a count.