component

TuxFilterPanel

Left-rail facet panel for list pages — collapsible facet groups, checkbox lists with counts, applied-filter chips at the top, Clear all when any filter is applied. Built on native <details> for zero-JS accordion + perfect a11y. v-model'd as a flat { facetName: ["v1", "v2"] } record.

canonical

Landscape-style facets

Toggle checkboxes — applied filters surface as chips at the top. Click a chip or Clear all to remove. The Retention class facet starts collapsed via collapsed: true.

live state

Selected filters

{}

The component v-models its state out as this object — wire it up to your query layer (OpenSearch facets, TanStack column filters, etc.) and re-fetch on change. 

<TuxFilterPanel
  v-model="selected"
  :facets="facets"
/>

props

Props + shape

  • facets — array of { name, label, buckets, collapsed? }. Required.
  • Each bucket — { value, label, count? }. Counts are formatted with thousands separators.
  • v-model — Record<string, string[]>. Map of facet name to array of selected values.
  • title — heading shown above the panel. Defaults to "Filter".
  • collapsed: true on a facet — start that group collapsed. Defaults to open.