Save 15% on all Justd Blocks
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.

Apple
Banana

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.

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'
Previous
Combo Box
Next
Select