KQ-503 · FILTER/LEDGE

Filter Ledge

A ledge of filter chips that keeps its arithmetic honest. Toggling a chip blooms its fill from the centre on snap while a check draws itself in on flick and widens a slot to sit in, and the result count beneath rolls its digits to the new number on glide. Clear all sweeps the fills off in a cascade, left to right; every chip is a toggle button carrying aria-pressed and its own tab stop.

KQ-503 · FILTER/LEDGE

results96 results, 1 filter active

Waterfront · 96 listings

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/filter-ledge

Props

filters: FilterChip[]; default —; The chips: id, label, and an optional per-filter count.
value / defaultValue: string[]; default —; Controlled or initial active filter ids.
onValueChange: (ids: string[]) => void; default —; Fires on every toggle and on clear all.
resultCount: number; default —; The number the readout rolls to; the owner derives it from the active filters.
onClear: () => void; default —; Fires when clear all empties the ledge.
label: string; default "Filters"; Accessible name for the chip group.

Prop	Type	Default	Description
filters	FilterChip[]	—	The chips: id, label, and an optional per-filter count.
value / defaultValue	string[]	—	Controlled or initial active filter ids.
onValueChange	(ids: string[]) => void	—	Fires on every toggle and on clear all.
resultCount	number	—	The number the readout rolls to; the owner derives it from the active filters.
onClear	() => void	—	Fires when clear all empties the ledge.
label	string	"Filters"	Accessible name for the chip group.