Multiple Select

Multiple select lets you pick more than one option from a list. It's like checking off items on your to-do list just click, click, click, and you're good to go!

If you are using Tailwind v4, please refer to the 2.x documentation. This documentation assumes you are using Tailwind v3.

Basic

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

Apple

Installation

If you hit any issues, make sure you check out the installation guide here.

Composed Components

When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.

The Multiple Select's decked out with several components to make it bangin'.

Visually Hidden

Visually Hidden is a component that hides an element from the screen but still keeps it accessible to screen readers.

List Box

ListBox are designed to present and manage lists of options or data entries, allowing users to view and select from multiple choices efficiently.

Field

Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.

Tag Group

This organizer keeps your tags tight and right, making sure they’re lined up and making sense, just like a librarian sorting books on a shelf.

Popover

Hover or click to see more content, like popping open a tent, useful for additional info without leaving the context..

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

Import the components and use them as shown below, adapting the structure to fit each component.

Intent

By default, the multiple select component uses the primary intent. But it has a secondary intent as well.

Apple

Shape

Customize the tag field’s shape using the shape prop.

Apple

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.

Props

Here's the fixed table:

PropTypeDefaultDescription
labelstring-The label of the tag field
descriptionstring-The description of the tag field
placeholderstring-The placeholder of the tag field
classNamestring-The class name of the tag field
namestring-The name of the tag field
listListData-The list of tags
onItemInserted(tag: TagItemProps) => void-The callback function when a tag is inserted
onItemCleared(tag: TagItemProps) => void-The callback function when a tag is cleared
isDisabledboolean-The disabled state of the tag field
intentstring'primary''primary', 'secondary'
shapestring'square''square', 'circle'