Multiple Select

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/multiple-select

Composed components

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

The MultipleSelect component lets users select multiple options.

MultipleSelectContent

The MultipleSelectContent component renders multiple select options.

MultipleSelectItem

The MultipleSelectItem component represents one multiple select option.

See the React Aria for the full API reference.