FilterChips

Material 3 styled filter chips for filtering lists. Supports optional counts, "All" option, and size variants.

Installation

typescript

import { FilterChips } from '@happyvertical/smrt-svelte';

Basic Usage

Simple filter selection with controlled state.

svelte

<script lang="ts">
  import { FilterChips } from '@happyvertical/smrt-svelte';

  const options = [
    { value: 'pending', label: 'Pending' },
    { value: 'active', label: 'Active' },
    { value: 'completed', label: 'Completed' }
  ];

  let selected = $state('pending');
</script>

<FilterChips
  options={options}
  selected={selected}
  onchange={(value) => selected = value}
/>

With Counts

Display item counts next to filter labels.

typescript

const options = [
  { value: 'pending', label: 'Pending', count: 12 },
  { value: 'active', label: 'Active', count: 34 },
  { value: 'completed', label: 'Completed', count: 89 }
];

With "All" Option

Add an "All" option that sums counts automatically.

svelte

<FilterChips
  options={options}
  selected={selected}
  showAll
  allLabel="All Items"
  onchange={(value) => selected = value}
/>

Size Variants

Two sizes available: small and medium (default).

svelte

<FilterChips options={options} {selected} size="sm" />
<FilterChips options={options} {selected} size="md" />

Disabled Options

Mark individual options as disabled.

typescript

const options = [
  { value: 'active', label: 'Active' },
  { value: 'archived', label: 'Archived', disabled: true }
];

Props

Prop	Type	Default	Description
`options` *	`FilterOption[]`	-	Available filter options
`selected` *	`string`	-	Currently selected value
`onchange`	`(value: string) => void`	`undefined`	Callback when selection changes
`size`	`'sm' \| 'md'`	`'md'`	Chip size variant
`showAll`	`boolean`	`false`	Show an "All" option
`allLabel`	`string`	`'All'`	Label for the all option

TypeScript

typescript

import { FilterChips } from '@happyvertical/smrt-svelte';

interface FilterOption {
  value: string;
  label: string;
  count?: number;
  disabled?: boolean;
}

interface Props {
  options: FilterOption[];
  selected: string;
  onchange?: (value: string) => void;
  size?: 'sm' | 'md';
  showAll?: boolean;
  allLabel?: string;
}

Accessibility

Uses role="radiogroup" and role="radio"
Supports aria-checked for active state
Active chip shows checkmark icon
Keyboard navigation supported