MultiSelect

The editor behind Attio's Categories field: a searchable popover of colour-coded chips, each with a right-aligned checkbox that toggles without closing the menu. Selected values render back in the trigger as the same chips. It composes the Select popover surface (radius 12, soft layered shadow, 32px rows) with Badge-style tone chips.

Preview

Installation

bun add crisp

import "crisp/styles.css";
import { MultiSelect } from "crisp";

Usage

import { MultiSelect } from "crisp";

const CATEGORIES = [
  { value: "b2b", label: "B2B" },
  { value: "internet", label: "Internet" },
  { value: "software", label: "Software" },
];

const [value, setValue] = useState(["internet"]);

<MultiSelect
  options={CATEGORIES}
  value={value}
  onValueChange={setValue}
  placeholder="Add categories…"
  aria-label="Categories"
/>;

API

`MultiSelect`

Prop	Type	Default	Description
`options`	`MultiSelectOption[]`	—	The selectable options.
`value`	`string[]`	—	Selected option values (controlled).
`onValueChange`	`(value: string[]) => void`	—	Fires when selection changes.
`placeholder`	`string`	—	Shown in the trigger when nothing is selected.
`searchable`	`boolean`	`true`	Show the filter input at the top of the popover.
`searchPlaceholder`	`string`	—	Placeholder for the filter input.
`disabled`	`boolean`	`false`	Dims and disables the trigger.
`aria-label`	`string`	—	Accessible name for the trigger.

`MultiSelectOption`

Field	Type	Description
`value`	`string`	Stable identity used in `value` / `onValueChange`.
`label`	`string`	Display text of the chip.
`tone`	`string`	Optional chip colour; derived from the label by a stable hash if unset.

Notes

Chips. Each option renders as a tone-coloured pill. Tones are assigned by a stable hash of the label, so the same category is always the same colour without hand-mapping every option.
Toggle in place. Clicking a row toggles its checkbox and keeps the popover open, so you can add several tags in one pass — matching Attio's editor.
Keyboard. ↑/↓ move through options, Enter toggles the focused row, Esc closes; the filter input narrows the list as you type.