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

RAC

Select fruits

No selected items

Installation

Install the component via the CLI in one command.

npm

pnpm

yarn

bun

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.

field list box popover tag group search field

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm

pnpm

yarn

bun

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.

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.

Select fruits

No selected items

Component API

MultipleSelect

The MultipleSelect component lets users select multiple options.

Prop	Type	Default
`className`	`string`	-
`name`	`string`	-
`onSearchChange`	`(value: string) => void`	-
`placeholder`	`string`	`No selected items`
`searchPlaceholder`	`string`	-
`searchValue`	`string`	-

MultipleSelectContent

The MultipleSelectContent component renders multiple select options.

Prop	Type	Default
`items`	`Iterable<T>`	-

MultipleSelectItem

The MultipleSelectItem component represents one multiple select option.

Prop	Type	Default
`className`	`string`	-

See the React Aria for the full API reference.

Unlock the full power of
Intent UI Design

Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.

Learn more

Combo Box

Native select

Unlock the full power of
Intent UI Design

Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.

Learn more

Multiple Select

On this page