shadcn.io is an independent project built on shadcn/ui
Two groups, one list of active filters, starting on All. Status is All, Active, Pending, and Completed. Type is Bug, Feature, and Enhancement. Choosing Bug clears All. Choosing All clears the rest. Turning the last filter off returns to All. No list is filtered.
Use it when filters combine and All means none. One choice per group, with arrow keys, is a Toggle Group. In Solid, Ark UI does not filter the results.
Installation
Anatomy
Usage
<div class="flex flex-col gap-4">
<ButtonGroup aria-label="Status filters">
{STATUSES.map(item => <Button aria-pressed={filters().includes(item.value)} onClick={toggleFilter} size="sm" value={item.value} variant={filters().includes(item.value) ? "default" : "outline"}>
{item.label}
</Button>)}
</ButtonGroup>
<ButtonGroup aria-label="Type filters">
{TYPES.map(item => <Button aria-pressed={filters().includes(item.value)} onClick={toggleFilter} size="sm" value={item.value} variant={filters().includes(item.value) ? "default" : "outline"}>
{item.label}
</Button>)}
</ButtonGroup>
</div>FAQ
How are the active filters tracked?
A list of values, starting as all. Each button carries its own value. Pressing one adds it to the list, or removes it when it's already there.
How does All behave?
Pressing All sets the list to just all. Turning on any other filter removes all, and turning off the last one puts all back, so the list is never empty.
How is an active filter shown?
Its button uses variant="default" and sets aria-pressed, while inactive filters use outline.
Do status and type filters combine?
In the demo they share one list, so Active and Bug can both be on. Decide in your query whether that means Active and Bug or Active or Bug.
Does the demo filter anything?
No. It only keeps the list. Read it where you render or fetch the results.
Could this be a Toggle Group?
Yes. A Toggle Group that allows several values handles the pressed state for you. You would still add the All reset yourself.
API Reference
Button Group
Sets aria-label="Status filters" and aria-label="Type filters". The rest is on the Button Group page.
Button
Sets aria-pressed={filters().includes(item.value)}, onClick={toggleFilter}, size="sm", value={item.value} and variant. The rest is on the Button page.
