Components
Multi Select
Displays a list of options for the user to pick from—triggered by a button.
Made by nyxb
Installation
Tweaked by malinskibeniamin, multi select component combines regular select, badge, command and tooltip. It lets users see and select multiple items.
Loading component...
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
Loading component...
Simple
Loading component...
Form
Loading component...
Controllable Search
search by control or load remote data
Loading component...
Input Custom (tag mode)
Allow user to select from input custom tag
Loading component...
Limit Count
limit max select count by maxCount
Loading component...
Limit item display length
limit max display item count with maxDisplay, or limit item display length with maxDisplayLength
Loading component...
Props
Credits
- We take our inspiration from Shadcn UI for the select style.
- We use Nyxb UI for the multi select component functionality.
Recent changes
- patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested baseline while caret semantics still allow any compatible release within the same major.#133
- minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
- minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
- majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
- minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109
Built by malinskibeniamin. The source code is available on GitHub.