MultiCombobox

Multi-select tag picker with inline search, tinted badges, and optional create-new. Type to filter, click × to remove, backspace to remove last.

Default (multi-select)

Incorrect use of 你

const [selected, setSelected] = React.useState(["grammar"]);

<MultiCombobox
  options={[
    { value: "grammar", label: "Incorrect use of 你", color: "#cd82f0" },
    { value: "tone", label: "Wrong tone", color: "#3b82f6" },
    { value: "spelling", label: "Spelling error", color: "#f97316" },
    { value: "punctuation", label: "Missing punctuation", color: "#14b8a6" },
  ]}
  value={selected}
  onValueChange={setSelected}
  placeholder="Select some options"
/>

With create-new

Incorrect use of 你

<MultiCombobox
  options={options}
  value={selected}
  onValueChange={setSelected}
  placeholder="Select some options"
  creatable
  onCreateOption={(label) => {
    const value = label.toLowerCase().replace(/\s+/g, "-");
    const color = colors[options.length % colors.length];
    setOptions((prev) => [...prev, { value, label, color }]);
    setSelected((prev) => [...prev, value]);
  }}
/>

Props

Prop	Type	Default
options	{ value: string; label: string; color: string }[]	—
value / defaultValue	string[]	—
onValueChange	(value: string[]) => void	—
placeholder	string	"Select some options"
creatable	boolean	false
onCreateOption	(label: string) => void	—
createColor	string (CSS color for preview badge)	muted foreground
disabled	boolean	false

Source

packages/react/src/components/multi-combobox.tsx