Filter Chips

The active filters as a line of text, each with a small button to remove it. They read as a caption, not as controls: the label, the operator as a symbol (a screen reader hears it as a word) and the value. Pass onclear for a "Clear all" at the end. It is a status region, so keep it mounted while the filters come and go, or the announcement is lost.

Active filters

The active filters as a caption, not as controls: the operator shows as a symbol and is read as a word. onclear adds Clear all. DataTable and ProductFilters both use it.

PSP 2 selected Amount $20 – $80 Status Paid

<div class="space-y-3">
	<FilterChips
		{entries}
		onremove={(entry) => (entries = entries.filter((item) => item.id !== entry.id))}
		onclear={() => (entries = [])}
	/>
	{#if !entries.length}
		<button
			type="button"
			class="text-muted text-xs underline"
			onclick={() => (entries = initial)}>Bring them back</button
		>
	{/if}
</div>

API

Prop	Type	Description
`entries` required	`FilterChip[]`	The active filters, in the order to show them.
`onremove` required	`(entry: FilterChip) => void`	Called with the chip whose remove button is pressed.
`onclear`	`() => void`	Shows "Clear all" after the chips, and is called when it is pressed.
`class`	`string`	Additional Tailwind classes merged onto the line.

`FilterChip`

Prop	Type	Description
`id` required	`string`	Stable key for the chip.
`label` required	`string`	What is filtered, such as `Brand`.
`symbol` required	`string`	The operator as a symbol, such as `∈` or `↔`.
`verb` required	`string`	The operator in words, read by screen readers in place of the symbol.
`value` required	`string`	What the filter is set to.
`removeLabel`	`string`	Accessible name of the remove button, for chips that share a label. Defaults to `Remove {label} filter`.