Inputs

FilterGroup

Inline filter chips for list toolbars, with an automatic "All" option.

<script>
  import { FilterGroup } from "@codeatlasdev/ui";

  let role = $state("all");
</script>

<FilterGroup
  label="Role"
  options={[{ value: "admin", label: "Admin" }, { value: "editor", label: "Editor" }]}
  bind:value={role}
/>

An “All” option is added in front of options and the value is 'all' when nothing is filtered. Clicking the active option clears the filter and goes back to 'all'. Inside AppList, render it in the filters snippet and connect it to list.setFilter.

#022

Role filter

Selected: all

Reference #022 · Pick in the gallery

Code

<script lang="ts">
  import { FilterGroup } from '@codeatlasdev/ui';

  const roles = [
    { value: 'admin', label: 'Admin' },
    { value: 'editor', label: 'Editor' },
    { value: 'viewer', label: 'Viewer' },
  ];
  let role = $state('all');
</script>

<FilterGroup label="Role" options={roles} bind:value={role} />
<p>Selected: {role}</p>

Props

Prop	Type	Default	Description
`options`	`{ value: string; label: string }[]`	–	Filter choices. Required.
`value`	`string`	`'all'`	Bindable selected value.
`label`	`string`	–	Text shown before the chips.
`onchange`	`(value: string) => void`	–	Called when the selection changes.
`class`	`string`	`''`	Extra classes on the root.