Default
Saved view
- Status is Active
- Role is not Viewer
2 filters applied.
Filters
Applied filters as removable chips, an Add filter builder and saved views (desktop).
- Pro
- Version 2.0.0-rc.1
- APG pattern: Disclosure + form controls
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.
Empty
Saved view
No filters applied.
Tokens
The 10 design tokens Filters 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 10 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.bg.subtle | … | --sd-color-bg-subtle |
| color.border.control | … | --sd-color-border-control |
| color.icon.default | … | --sd-color-icon-default |
| color.text.default | … | --sd-color-text-default |
| color.text.secondary | … | --sd-color-text-secondary |
| radius.full | … | --sd-radius-full |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
| spacing.gap.xs | … | --sd-spacing-gap-xs |
| spacing.inset.sm | … | --sd-spacing-inset-sm |
| spacing.stack.sm | … | --sd-spacing-stack-sm |
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/filtersThen import it
import { Filters } from "@/components/ui/filters"Props
| Prop | Type | What it does |
|---|---|---|
fieldsrequired | FilterField[] | |
value | FilterValue[] | |
defaultValue | FilterValue[]Default [] | |
onChange | (filters: FilterValue[]) => void | |
savedViews | SavedView[] | Named sets of filters people switch between. |
label | stringDefault 'Filters' | Names the filter group. Default "Filters". |
className | string |
When to use it
Use it for
- Admin lists and tables with several attributes to filter by
Use something else for
- One or two filters: show Selects inline
- Mobile: use ChipFilterBar
Accessibility
Screen readers announce "Remove filter: Status is Active, button"; after changes "1 filter applied.".
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.
What your product still has to do
- Keep filters in the URL so views can be shared
Shared patterns it ships with: 3.3.6 (saved views and Clear all are reversible).
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 | 205 text runs: 0 below 7:1, lowest 8.43:1 |
| Target size | 54 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 90 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 7 of 7, Firefox 7 of 7, WebKit 7 of 7 |
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 reaches the saved view select |
| Tab | Tab reaches Add filter |
| Enter | Enter opens the builder |
| Escape | Esc closes it and focus returns |
| Tab | Tab reaches Clear all |
| Tab | Tab reaches the first chip's remove button, named after the filter |
| Enter | Enter removes it; the count is announced |
In Figma
The Figma component is Filters, with Builder (Closed, Open); State (Default, Empty). The Figma library isn’t published yet.
Figma to code: Show saved views → savedViews; Builder (Closed, Open; preview only); State (Default, Empty = defaultValue (empty)); nested Chip → defaultValue.