Multi Select

Open in playground

Pick up to N options. A capped counter shows remaining capacity; unselected cards dim at the limit so users know why they can't pick more.

Preview

What matters most right now?

Choose up to 3 priorities to guide your plan

↑↓to navigateEnterto select⌘ Enterto submitEscto skip

Usage

import { MultiSelect } from "@/components/socratic-ui/multi-select";

<MultiSelect
  question="What matters most right now?"
  max={3}
  options={[
    { title: "Speed to market" },
    { title: "Polish & quality" },
  ]}
  value={priorities}
  onChange={setPriorities}
/>

API Reference

Prop	Type	Default
`question`required The headline shown above the options.	`string`	`—`
`subtitle` Optional supporting copy beneath the question.	`string`	`—`
`options`required The list of selectable options.	`{ title: string; subtitle?: string }[]`	`—`
`max` Maximum selectable options. Unselected cards dim once the cap is hit.	`number`	`3`
`value`required Titles of the currently selected options.	`string[]`	`—`
`onChange`required Called when the selection changes.	`(value: string[]) => void`	`—`
`number` Optional leading question number.	`string`	`—`
`iconLayout` How icons align relative to their label. `vertical` stacks icon above label for a tile-style layout.	`"horizontal" \| "vertical"`	`"horizontal"`
`iconAlignment` Horizontal alignment of the icon within its slot. Only applies when `iconLayout` is `"vertical"`.	`"left" \| "center"`	`"left"`
`motion` Opt-in entrance animation config. Omit for static rendering; pass `{ enabled: true }` (or a preset from `motion.ts`) to animate in on mount.	`SocraticMotion`	`—`