Component
ActiveFilterChips
The filters narrowing a list, each removable on its own, with Clear all.
import { ActiveFilterChips } from '@loidolt/theme-svelte';
Example
- Status: Ready
- Stock: Birch ply
- Owner: Me
Notes
- Renders nothing when there are no filters and no
children, so it can stay in the layout unconditionally. - Removing a chip moves focus to the chip that took its place, else the one before, else the group, so keyboard users never land back on
<body>. - Label chips the way a user would say the filter aloud: "Status: Ready", not "ready".
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
items required | Option<T>[] | — | One chip per filter narrowing the results, labelled the way the user would say it. |
onRemove required | (value: T) => void | — | Clear one filter. Remove it from items in response. |
children | Snippet | — | Notes after the chips, e.g. a filter that does not apply to this view. |
class | string | — | |
clearAllLabel | string | 'Clear all' | |
label | string | 'Active filters' | |
onClearAll | () => void | — | Clear every filter; shows a trailing "Clear all" when set. |
ref bindable | HTMLDivElement | null | null | |
removeLabel | (label: string) => string | (text) => `Remove filter ${text}` |
Plus the attributes of HTMLAttributes<HTMLDivElement>, forwarded to the root element.