Multi Select

Pick several values from a searchable checkbox list. Selected items show as removable chips on the trigger. For autocomplete-style multi with an inline chip input, use Combobox with multiple.

Gallery

Skills picker card with live chip count — searchable list and removable badges.

Loading…

Installation

CLI

npx @sonojs/ui@latest add multi-select

Also needs

npx @sonojs/ui@latest add badge button command popover

npm i lucide-react

Usage

multi-select.tsx

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

const frameworks = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

export function Example() {
  return (
    <MultiSelect
      options={frameworks}
      defaultValue={["next"]}
      placeholder="Select frameworks…"
    />
  )
}

Props

Prop	Type	Default	Description
options	MultiSelectOption[]	-	`{ value, label, disabled? }` items in the list.
value	string[]	-	Controlled selected values.
defaultValue	string[]	[]	Initial selection when uncontrolled.
onValueChange	(value: string[]) => void	-	Fires when the selection changes.
placeholder	string	"Select…"	Trigger text when nothing is selected.
searchPlaceholder	string	"Search…"	Placeholder for the search field.
emptyText	string	"No results found."	Shown when search matches nothing.
searchable	boolean	true	Show the search input in the popover.
maxCount	number	-	Max chips in the trigger before a `+N more` badge.
disabled	boolean	false	Disables the trigger and chip remove actions.
className	string	-	Merge Tailwind classes on the trigger.

Select — single value from a button trigger
Combobox — autocomplete multi with `multiple`
Field — label and describe the control