Quick Filter
A dashed trigger that filters a list by one facet, with a searchable checkbox menu.
Installation
import { QuickFilter } from 'nooxit-design-system/components/quick-filter';Usage
The filter is controlled: pass the selected values and update them in
onValueChange. Each option has a label for search, and can carry a
display node (a badge, for example) shown in the menu and the trigger, an
icon and a count.
<QuickFilter
title="Status"
options={[
{ value: 'open', label: 'Open', count: 12 },
{ value: 'closed', label: 'Closed', count: 30 },
]}
value={status}
onValueChange={setStatus}
/>Notes
The trigger shows the selected value after a divider; with more selected
than maxShown (1) it shows one "2 selected" chip instead. Its label and icon
match a button of the same height: text-sm medium and a 16px icon. A
checked box keeps its color while its row is hovered. "Clear filters" appears
at the end of the menu once something is selected. Options keep their own
order in the value, whatever order they were picked in.
Source — src/components/quick-filter.tsx
Figma — Quick Filter in the Nooxit UI kit