primitives

MultiSelect

Multi-value form field — the chosen values show as removable chips, the menu stays open while toggling. For a table-header filter use `<MultiSelectFilter>` instead.

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.json

Or import from the workspace package:

import { MultiSelect } from "@8maverik8/design";

Examples

Field with chips

Each selected value is a chip with an × to deselect; the menu stays open so several can be picked at once.

Breath

const [value, setValue] = useState<string[]>(["breath"]);

<MultiSelect
  placeholder="Select focus areas…"
  value={value}
  onChange={setValue}
  options={[
    { value: "breath", label: "Breath" },
    { value: "sleep", label: "Sleep" },
    { value: "focus", label: "Focus" },
    { value: "energy", label: "Energy" },
    { value: "recovery", label: "Recovery" },
  ]}
/>

Guidelines

Use for a form field where one record holds several values (user types, sources, tags).
Use as a table-header filter — that's `<MultiSelectFilter>` (trigger reads 'N selected', no chips).The two share toggle mechanics but read differently: MultiSelect is an input with chips; MultiSelectFilter is a compact button. Mixing them makes forms and toolbars look inconsistent.
Drive it controlled — pass `value` as a `string[]` and update it in `onChange`.
Reach for a custom checkbox grid when a record can hold many values — the chip field scales and stays on-brand.