$99 launch price

Components

Multi Select

Pro
Lin TorresAda MarlowNoor HaddadKai Okafor
launch

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/multi-select

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 110 Pro components · lifetime updates.

I have a licenseGet Pro
const [assignees, setAssignees] = useState<string[]>([]);

<MultiSelect
  label="Assignees"
  placeholder="Add people…"
  value={assignees}
  onValueChange={setAssignees}
  options={[
    { value: "ada", label: "Ada Marlow", description: "Design", group: "Product" },
    { value: "lin", label: "Lin Torres", description: "Engineering", group: "Platform" },
  ]}
/>

Use cases

  • Assigning people

    Pick reviewers, assignees or attendees from a grouped directory. Chips spring into the field and collapse into +N once the list gets long.

  • Tags and labels

    Turn on creatable to let users add a label that does not exist yet without leaving the field.

  • Filter bars

    Multi-pick statuses, regions or owners; the list stays keyboard-first with wrapping arrows, Home/End and chip navigation.

  • Large remote datasets

    Rows are virtualised, so thousands of options scroll smoothly, and onQueryChange with loading covers server-side search.