Components

Multiple Select

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

alpha

Basic

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

Installation

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

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.

The Multiple Select comes packed with several components to enhance functionality and provide a seamless experience.

ListBox are designed to present and manage lists of options or data entries, allowing users to view and select from multiple choices efficiently.
A collection of tags displayed together, allowing users to categorize, filter, or manage multiple labels efficiently.
Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.
A small, floating UI element that appears near a trigger to show contextual information or actions.
Visually Hidden is a component that hides an element from the screen but still keeps it accessible to screen readers.

Manual Installation

Make sure you also install the composed components and the required packages for the component to function properly.

Anatomy

Intent

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

Shape

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

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.

Food
Music
You have selected: 24

Max Items

You can limit the number of selected items using the maxItems prop.

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 multiple select
descriptionstring-The description of the multiple select
placeholderstring-The placeholder of the multiple select
classNamestring-The class name of the multiple select
namestring-The name of the multiple select
itemsarray of objects-The list of multiple select items (options)
selectedKeysSelection-The selected keys of the multiple select
onSelectionChangefunction-The callback function for selection
maxItemsnumber-The max number of items that can be selected
isDisabledboolean-The disabled state of the multiple select
isInvalidboolean-The invalid state of the multiple select
errorMessagestring-The error message if invalid
intentstring'primary''primary', 'secondary'
shapestring'square''square', 'circle'
Get premium Blocks
Create stunning, professional-grade layouts that not only save time but also elevate the quality of your projects.
Previous
Combo Box
Next
Select