Multi Select

Searchable multi-value select with badges, built on cmdk.

Multi Select

Searchable multi-value select with badges, built on cmdk.

Preview

React

Features

  • Type to filter; Enter toggles the highlighted option.
  • Selected values render as removable badges.
  • Backspace removes the last value.

Installation

npx shadcn@latest add https://www.shadcn-form.com/r/multi-select.json

The CLI installs every dependency listed in the registry item.

Usage

import {
  MultiSelector,
  MultiSelectorContent,
  MultiSelectorInput,
  MultiSelectorItem,
  MultiSelectorList,
  MultiSelectorTrigger,
} from '@/components/ui/multi-select'


const [values, setValues] = React.useState<string[]>([])


<MultiSelector values={values} onValuesChange={setValues}>
  <MultiSelectorTrigger>
    <MultiSelectorInput placeholder="Select frameworks" />
  </MultiSelectorTrigger>
  <MultiSelectorContent>
    <MultiSelectorList>
      <MultiSelectorItem value="React">React</MultiSelectorItem>
      <MultiSelectorItem value="Vue">Vue</MultiSelectorItem>
    </MultiSelectorList>
  </MultiSelectorContent>
</MultiSelector>