ComponentsCore
Multiple Select
Multiple Select is an interface component that enables the selection of multiple values, commonly used for tagging, filtering, or categorization.
Example
Installation
Required Component
This component depends on Command, Popover, Tag Group and Field. Make sure you have installed and configured it before using this component.Command
Command offers an accessible interface to build keyboard-driven menus, search fields, and autocomplete inputs by combining input handling, navigation, and selection.
Popover
A popover is a floating overlay element that appears next to a trigger element, providing additional contextual information or actions without navigating away from the current page.
Tag Group
A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.
Field
The Field component is fundamental and used by many other components. It applies consistent, reusable styles and appears in inputs, labels, descriptions, and other related elements.
Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
TypeScript
JavaScript
Copy and paste the following code into your project.
TypeScript
JavaScript
npx @libravelui@latest add multiple-selectAnatomy
import { MultipleSelect } from "@/components/ui/core/multiple-select";<MultipleSelect<(typeof genres)[number]>
items={genres}
value={selected}
onChange={setSelected}
label="Genres"
placeholder="Select genres"
inputPlaceholder="Search genres..."
className="min-w-64"
/>Props
Loading types…