ComponentsCore
Multiple Select
Multiple Select is an interface component that enables the selection of multiple values, commonly used for tagging, filtering, or categorization.
Example
Usage
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.
Copy and paste the following code into your project.
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…