FilterChips

Quick filters above a list, with an optional count on each. Multiple mode toggles each chip on its own; single mode picks one. ChipCount is the count badge, also used inside tabs.

FilterChips
ChipCount

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, FilterChips

Dark theme, FilterChips

High contrast theme, FilterChips

UsageLink to the section Usage

tsx

import { FilterChips, ChipCount } from '@skribly/ui/navigation'

tsx

<FilterChips label="Status" selected={status} onChange={setStatus} clearLabel="Clear filters"
  chips={[{ id: 'open', label: 'Open', count: 42, countLabel: '42 issues' }]} />
<ChipCount value={1280} max={999} label="1280 issues" />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Multiple mode is a set of toggle buttons with aria-pressed; single mode is a radio group.
An active chip gains a check mark and an accent border, so the state never rests on colour.
Counts read as their label, such as "42 issues".
The clear button returns focus to the chips once it goes away.
Chips wrap on narrow screens.

This demo runs through axe in all three themes on every test run. See what the tests check.