Skip to main content

ActiveFilterChips

ActiveFilterChips

Row of removable chips naming each filter that narrows a list, with Clear all

Tags: component filters toolbar

View Demo

ActiveFilterChips shows one chip per active filter under a FilterToolbar, so filters folded behind the Filters button stay visible. Each chip clears only its own filter; "Clear all" resets everything. It renders nothing when there are no chips.

Import​

<script>
  import { ActiveFilterChips } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<ActiveFilterChips
  chips={[{ key: 'status', label: 'Status: Installed', onRemove: () => (status = '') }]}
  onClearAll={clearFilters}
/>

Props​

Prop Type Default Description
chips ActiveFilterChip[] required { key, label, onRemove } per active filter
onClearAll () => void - Shows a trailing "Clear all" button when set
children Snippet - Extra notes after the chips
class string - Additional classes

Accessibility​

  • Renders a role="group" named "Active filters"; each chip is a button named "Remove filter …".
  • Chips are 44px tall on phones and 32px from sm up.
On this page