FormsStable

Filter Tabs

Sourcecomponents/FilterTabs.astro

The filters

A wrapping row of filter pills for narrowing a list — the active pill is solid violet, the rest quiet greys. Each is a real button; click one to select it. Unlike the Tab Row (which switches views), this filters a grid and wraps to many lines. Click a pill below.

click a filter

Props

Prop	Type	Default	Notes
`tabs`	{value,label}[]	`—`	The filters. Required.
`active`	string	`first tab`	The value of the initially-selected pill.
`filter:select`	event	`—`	Fires on the row when a pill is clicked; detail is the value. A parent listens and filters its grid.
`ariaLabel`	string	`'Filter'`	Accessible label for the group.

Usage

Presentational — listen for filter:select and hide/show items by category. Used in the Shop to filter the product grid.

<FilterTabs
  active="all"
  tabs={[
    { value: 'all', label: 'Alle' },
    { value: 'print', label: 'Printprodukte' },
    { value: 'marketing', label: 'Marketing' },
  ]}
/>

<script>
  el.querySelector('[data-filter-tabs]')
    .addEventListener('filter:select', (e) => applyFilter(e.detail));
</script>

Rules

Lead with an "all" pill and mark it active by default.

Keep labels to a word or two; let the row wrap.

Don't

Use it to switch whole views — that's a Tab Row.

Select more than one — it's single-choice.