patterns

MultiSelectFilter

Generic multi-select filter for table page headers. "All <noun>" / single value / "N selected" trigger label, checkbox items with optional counters, footer Clear entry.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/multi-select-filter.json

Or import from the workspace package:

import { MultiSelectFilter, MultiSelectFilterOption } from "@8maverik8/design";

Examples

Severity filter with counts

const [value, setValue] = useState<Set<string>>(new Set(["high"]));

<MultiSelectFilter
  heading="Severity"
  emptyLabel="All severities"
  pluralNoun="severity"
  options={[
    { value: "critical", label: "critical", count: 4 },
    { value: "high",     label: "high",     count: 17 },
    { value: "medium",   label: "medium",   count: 42 },
    { value: "low",      label: "low",      count: 121 },
  ]}
  value={value}
  onChange={setValue}
/>

Guidelines

Use `<Set<string>>` for the value — the component matches against `.has()` for O(1) toggles.
Roll a separate dropdown filter per page.Severity, source, status, category — all of them share the exact same UI grammar. Reuse this so they all click the same way.