Multi Select

Powered by

Base UIcmdkShadcn UILucide

Installation

Tweaked by malinskibeniamin, multi select component combines regular select, badge, command and tooltip. It lets users see and select multiple items.

When to use

The Multi Select component allows users to select multiple options from a list. Use this decision tree to determine when it's appropriate:

Usage

import {
  MultiSelect,
  MultiSelectContent,
  MultiSelectItem,
  MultiSelectList,
  MultiSelectTrigger,
  MultiSelectValue,
} from "~/components/ui/multi-select"

<MultiSelect>
  <MultiSelectTrigger className="w-80">
    <MultiSelectValue placeholder="Select Frameworks" />
  </MultiSelectTrigger>
  <MultiSelectContent>
    <MultiSelectList>
        <MultiSelectItem value="react">React</MultiSelectItem>
        <MultiSelectItem value="vue">Vue</MultiSelectItem>
        <MultiSelectItem value="angular">Angular</MultiSelectItem>
        <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
    </MultiSelectList>
  </MultiSelectContent>
</MultiSelect>

Examples

Default

Simple

Form

Controllable Search

search by control or load remote data

Input Custom (tag mode)

Allow user to select from input custom tag

Limit Count

limit max select count by maxCount

Limit item display length

limit max display item count with maxDisplay, or limit item display length with maxDisplayLength

Props

Credits

• We take our inspiration from Shadcn UI for the select style.
• We use Nyxb UI for the multi select component functionality.