Multi Combobox

Docs

Multi Combobox

A combobox component that allows selecting multiple options from a list.

Open in

Select Frameworks

Choose one or more frameworks

Multi-select combobox with form integration using react-hook-form

Installation

Usage

The Multi Combobox component combines a popover, command menu, and badge system to create a component that allows users to select multiple options from a searchable dropdown list.

import { MultiCombobox } from "@/components/ui/multi-combobox";

// Example usage
const frameworks = [
  { value: "react", label: "React" },
  { value: "vue", label: "Vue" },
  { value: "angular", label: "Angular" },
  // ...more options
];
 
const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
 
<MultiCombobox
  placeholder="Select frameworks..."
  options={frameworks}
  selectedValues={selectedValues}
  onValueChange={(values) => setSelectedValues(values)}
/>;

Features

Search through available options
Select multiple items from a dropdown
Display selected items as removable badges
Fully keyboard accessible
Customizable styling

Props

Prop	Type	Default	Description
`className`	`string`	`-`	The class name to apply to the component.
`placeholder`	`string`	`Select options...`	Placeholder text for the combobox button.
`options`	`{ value: string; label: string }[]`	`-`	Array of options to display in the dropdown.
`selectedValues`	`string[]`	`[]`	Array of selected option values.
`onValueChange`	`(values: string[]) => void`	`-`	Callback when selection changes.
`disabled`	`boolean`	`false`	Whether the combobox is disabled.
`searchPlaceholder`	`string`	`Search...`	Placeholder text for the search input.

Modal Multi Select

Contribute