❤️ Support our project - Your donation helps us continue developing awesome tools!


Docs
Multi Select

Multi Select

Displays a list of options for the user to pick from—triggered by a button.

Installation

npx nyxbui@latest add multi-select

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>
</MultiSel>

Examples

With Filter

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

Form

You can manage frameworks in framework settings.