Multiple Select

Basic

The basic multiple select component lets you select multiple options from a list. It displays selected options with Tag components.

Installation

npx shadcn@latest add @intentui/multiple-select

Composed components

Manual installation

npm i 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"
  items={fruits}
>
  {(item) => {
    return (
      <MultipleSelect.Item textValue={item.name}>
        {item.name}
      </MultipleSelect.Item>
    )
  }}
</MultipleSelect>

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.