ChipFilterBar
A scrolling row of filter chips for mobile lists. Selected chips show a tick.
- Pro, mobile
- Version 2.0.0-rc.1
- APG pattern: Radio group (single) or toolbar of toggle buttons (multiple)
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Multiple
Show the codeHide the code
Multiple, code
<ChipFilterBar aria-label="Filter by tag" selectionMode="multiple" defaultSelectedKeys={['Design', 'Research']}>{['Design', 'Research', 'Engineering', 'Ops'].map((c) => <Chip key={c} id={c}>{c}</Chip>)}</ChipFilterBar>Tokens
The 12 design tokens ChipFilterBar reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 12 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.action.primary | … | --sd-color-action-primary |
| color.bg.canvas | … | --sd-color-bg-canvas |
| color.bg.muted | … | --sd-color-bg-muted |
| color.bg.subtle | … | --sd-color-bg-subtle |
| color.border.control | … | --sd-color-border-control |
| color.text.default | … | --sd-color-text-default |
| color.text.disabled | … | --sd-color-text-disabled |
| color.text.on-primary | … | --sd-color-text-on-primary |
| radius.full | … | --sd-radius-full |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
| spacing.gap.xs | … | --sd-spacing-gap-xs |
| target.min | … | --sd-target-min |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/chip-filter-barThen import it
import { ChipFilterBar, Chip } from "@/components/ui/chip-filter-bar"Props
| Prop | Type | What it does |
|---|---|---|
aria-labelrequired | string | Names the group (required: say what the chips filter). |
childrenrequired | ReactNode | Chip elements. |
selectionMode | unknownDefault 'single' |
When to use it
Use it for
- Quick filters above a mobile list
Use something else for
- Desktop filtering with conditions: use Filters
- Switching views: use Tabs or SegmentedControl
Accessibility
Screen readers announce "Show, radio group" then "Unread, radio button, not checked, 2 of 5".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.
Compact density meets AA (2.5.8, 24px targets), not AAA.
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 60 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 145 text runs: 0 below 7:1, lowest 11.42:1 |
| Target size | 48 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 24 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 3 of 3, Firefox 3 of 3, WebKit 3 of 3 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab enters on the selected chip |
| ArrowRight | Right moves to the next chip |
| Space | Space selects it |
In Figma
The Figma component is ChipFilterBar, with Selection (Single, Multiple). The Figma library isn’t published yet.
Figma to code: Selection → selectionMode (Single = "single", Multiple = "multiple"); Chips → children.