Multiselect

Search and pick several values. Each choice becomes a yellow token in the field with its own remove cell, and chosen options stay listed while new matches arrive.

Loading the live example…

"use client"

import { useState } from "react"
import { Multiselect, type MultiselectOption } from "@/components/keyline/ui/multiselect"

const PEOPLE: MultiselectOption[] = [
  { value: "pam", label: "Pam Beesly", description: "Reception" },
  { value: "angela", label: "Angela Martin", description: "Accounting" },
  { value: "oscar", label: "Oscar Martinez", description: "Accounting" },
  { value: "kevin", label: "Kevin Malone", description: "Accounting" },
  { value: "darryl", label: "Darryl Philbin", description: "Warehouse" },
  { value: "toby", label: "Toby Flenderson", description: "HR" },
  { value: "creed", label: "Creed Bratton", description: "Quality assurance" },
]

// a local list behind Multiselect's async source
function findPeople(query: string, signal: AbortSignal): Promise<MultiselectOption[]> {
  return new Promise((resolve) => {
    const t = setTimeout(() => resolve(PEOPLE.filter((p) => `${p.label} ${p.description}`.toLowerCase().includes(query.toLowerCase()))), 250)
    signal.addEventListener("abort", () => clearTimeout(t))
  })
}

export function MemoRecipients() {
  const [to, setTo] = useState<MultiselectOption[]>([PEOPLE[1]])

  return (
    <div className="grid max-w-[480px] gap-3">
      <Multiselect label="Send the expense memo to" placeholder="Add people" noun={["person", "people"]} loadOptions={findPeople} value={to} onValueChange={setTo} />
      <p role="status" className="text-[14px] text-kl-ink-2">
        {to.length ? `${to.length} ${to.length === 1 ? "person" : "people"} will get it.${to.some((p) => p.value === "toby") ? " Michael will ask why Toby is on it." : ""}` : "Nobody yet. Accounting usually wants it."}
      </p>
    </div>
  )
}

Installation

npx shadcn@latest add @keyline-ui/multiselect

Run it where your components.json is. The first time, map the @keyline-ui registry: one command, in Installation.

Usage

import { Multiselect } from "@/components/keyline/ui/multiselect"

<Multiselect
  label="Send the memo to"
  noun={["person", "people"]}
  loadOptions={findPeople}
  value={to}
  onValueChange={setTo}
/>

Props

Prop	Type	Default	Description
`label`	`ReactNode`	`—`	Names the field. Required.
`loadOptions`	`(query, signal) => Promise<MultiselectOption[]>`	`—`	Required. Called on open with an empty query, then on each edit; a newer search aborts the older one. For a fixed list, filter it here.
`value`	`MultiselectOption[]`	`—`	The chosen options, whole: `{ value, label, description?, count?, disabled? }`. With `onValueChange`, or start with `defaultValue`.
`noun`	`[string, string]`	`["item", "items"]`	Names what is listed, in the status line.
`layout`	`"control" \| "cell"`	`"control"`	`cell` drops the frame and hides the label, for a toolbar.

Backspace in an empty input removes the last token. For a short fixed list, Checkbox group shows every choice at once. Built on Base UI Combobox.