Pickers

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!

Basic

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

Apple
Banana

Installation

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

Composed Components

Plug this component into the CLI, and it automatically loads all the included components. No need to add them individually.

The Multiple Select comes packed with a variety of components to make it stand out.

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.

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.

Field

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

Popover

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

Visually Hidden

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

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

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'
DrawerProgress Circle