Faceted Filter

FacetedFilter is a multi-select dropdown for narrowing a list by one facet — payment method, status, region. A dashed outline trigger shows the active selection (individual badges up to two, then a count), and the popover holds a searchable, checkbox-marked option list with optional per-option counts. selected is bindable and holds option values. Built from Popover + Command + Checkbox.

Picking values

A searchable list of values for one facet, with counts trailing each option so the reader can see what a tick is worth before making it. selected is bindable. Two or fewer chosen values show as their own badges in the trigger; past that it collapses to one “N selected”, because a trigger that grows with every tick pushes the rest of the toolbar onto a second row.

<div class="flex flex-wrap gap-2">
	<FacetedFilter title="Method" options={methods} {counts} bind:selected />
	<FacetedFilter
		title="Method"
		options={methods}
		{counts}
		selected={['card', 'paypal', 'apple_pay']}
	/>
</div>

Loading options

loading swaps the option list for a spinner while the facets are fetched — the shape a server-driven filter needs, where the values aren't known until asked for. Options can also be plain strings when label and value are the same thing.

When not to reach for it

Inside a DataTable, column filtering is one Filters button opening a two-pane panel — never a row of per-column buttons, which don't scale past two or three columns and silently cap what's filterable. FacetedFilter stays for filtering something that isn't a table column at all.

A filter bar above a chart, a facet on a card grid, a picker in a sheet — anywhere the thing being narrowed has no column to belong to.

API

Prop	Type	Default	Description
`title` required	`string`		Facet name shown in the trigger and search placeholder.
`options`	`Array<string\|{label: string, value: string}>`	`[]`	Options as objects `{ label, value }` or plain strings (normalized to both).
`selected` bindable	`string[]`	`[]`	Bindable array of selected option values.
`counts`	`Object<string, number>`	`{}`	Optional map of value to count, rendered trailing each option.
`loading`	`boolean`	`false`	Shows a loading spinner in place of the option list.
`onOpenChange`	`(open: boolean) => void`		Callback fired when the popover opens or closes.
`class`	`string`		Extra Tailwind classes merged onto the trigger.