A flexible dropdown input that enables users to select multiple options, ideal for tagging, categorization, and filtering tasks, using tags to show selected items.

Basic

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

Select fruits

No selected items

Installation

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.

This component comes packed with several components to enhance functionality and provide a seamless experience.

field list box popover tag group search field

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.

Select tags

Food

Music

Select at least one tag.

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.