Multiple Select
Installation
Install the component via the CLI in one command.
npx shadcn@latest add @intentui/multiple-select
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm install react-aria-components react-aria @heroicons/react
Anatomy
import { MultipleSelect, MultipleSelectItem, MultipleSelectLabel, MultipleSelectSection } from "@/components/ui/multiple-select"<MultipleSelect
className="min-w-2xs max-w-min"
placeholder="Select fruits"
aria-label="Fruits"
>
<MultipleSelectContent items={fruits}>
{(item) => {
return (
<MultipleSelectItem textValue={item.name}>
{item.name}
</MultipleSelectItem>
)
}}
</MultipleSelectContent>
</MultipleSelect>Examples
Controlled
This component lets you select tags dynamically, updating the list with callbacks on add and remove. It displays selected tags with Tag components and logs each action.
Invalid
When the component is invalid, it displays an error message.
Disabled
When the component is disabled, it prevents the user from adding or removing tags.
Component API
MultipleSelect
MultipleSelect extends the React Aria Components <Select> component.
classNamestringnamestringonSearchChange(value: string) => voidplaceholderstringNo selected itemssearchPlaceholderstringsearchValuestringMultipleSelectContent
MultipleSelectContent is a custom declarative slot and does not extend a DOM or React Aria component.
itemsIterable<T>MultipleSelectItem
MultipleSelectItem extends the Intent UI <ListBoxItem> component.
classNamestringSee the React Aria for the full API reference.
