Multi Select

A multi-select component that lets you select multiple items from a list.

Select stack

Variants

1. Limit count

Select stack

2. Filter

Select stack

3. Form

4. Max display

Select stack

5. Custom input

Select stack

6. Controllable search

Select stack

Installation

npx ever-ui-clx@0.2.1 add demo-multi-select

Usage

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

<MultiSelect>
  <MultiSelectTrigger className="w-96">
    <MultiSelectValue placeholder="Select stack" />
  </MultiSelectTrigger>
  <MultiSelectContent>
    <MultiSelectList>
      <MultiSelectGroup heading="React">
        <MultiSelectItem value="react">React</MultiSelectItem>
        <MultiSelectItem value="next">Next.js</MultiSelectItem>
        <MultiSelectItem value="remix">Remix</MultiSelectItem>
      </MultiSelectGroup>
      <MultiSelectGroup heading="Vue">
        <MultiSelectItem value="vue">Vue</MultiSelectItem>
        <MultiSelectItem value="nuxt">Nuxt</MultiSelectItem>
      </MultiSelectGroup>
      <MultiSelectGroup heading="Others">
        <MultiSelectItem value="angular">Angular</MultiSelectItem>
        <MultiSelectItem value="svelte">Svelte</MultiSelectItem>
      </MultiSelectGroup>
    </MultiSelectList>
  </MultiSelectContent>
</MultiSelect>

Label*Radio Card Group