Components

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.

Preview

Code

Installation

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

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'.

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

Tag GroupThis 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.

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

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

Visually HiddenVisually 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.

Preview

Code

Shape

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

Preview

Code

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.

Preview

Code

Invalid

When the component is invalid, it displays an error message.

Preview

Code

Disabled

When the component is disabled, it prevents the user from adding or removing tags.

Preview

Code

Props

Here's the fixed table:

Prop	Type	Default	Description
label	string	-	The label of the tag field
description	string	-	The description of the tag field
placeholder	string	-	The placeholder of the tag field
className	string	-	The class name of the tag field
name	string	-	The name of the tag field
list	ListData	-	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
isDisabled	boolean	-	The disabled state of the tag field
intent	string	'primary'	'primary', 'secondary'
shape	string	'square'	'square', 'circle'

Combo Box

Select

Prologue

Getting started

Dark mode

Components

Buttons

Charts

Collections

Colors

Controls

Date and time

Drag and drop

Forms

Layouts

Media

Navigation

Overlays

Pickers

Statuses

Surfaces

Utilities

Multiple Select

Basic

Installation

Composed Components

Manual Installation

Anatomy

Intent

Shape

Controlled

Invalid

Disabled

Props