MultiSelect

A multi-select dropdown with chip display for selected items. Supports labels, descriptions, error states, max selection limits, and accent colors.

Basic

With Label

With Description

Add helper text below the select for additional context.

With Error

Max Items

Limit the number of selections. Remaining options become disabled once the limit is reached.

Controlled

With Icon

Colors

Disabled Options

Individual options can be disabled while others remain selectable.

Disabled

Tag Selector

A tag picker with a max limit, icon, and counter.

Team Members

Select team members with pre-selected defaults.

Props

Prop	Type	Default	Description
`options`	`{ value: string; label?: string; disabled?: boolean }[]`	—	Array of options to display in the dropdown.
`value`	`string[]`	—	The currently selected values (controlled).
`defaultValue`	`string[]`	`[]`	The initially selected values (uncontrolled).
`onValueChange`	`(value: string[]) => void`	—	Called when the selected values change.
`placeholder`	`string`	`"Select..."`	Placeholder text shown when nothing is selected.
`label`	`string`	—	Label text displayed above the select.
`description`	`string`	—	Helper text displayed below the select.
`error`	`string`	—	Error message displayed below the select.
`disabled`	`boolean`	`false`	Disables the entire select.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for chips and focus ring.
`startIcon`	`ReactNode`	—	Icon rendered at the start of the trigger.
`maxItems`	`number`	—	Maximum number of items that can be selected. Remaining options become disabled when the limit is reached.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}
`--mantle-option-hover`	`CSS variable`	`gradient`	Override the option hover background via style. e.g. style={{ "--mantle-option-hover": "#3b82f6" }}

options

{ value: string; label?: string; disabled?: boolean }[]

Array of options to display in the dropdown.

value

string[]

The currently selected values (controlled).

defaultValue[]

string[]

The initially selected values (uncontrolled).

onValueChange

(value: string[]) => void

Called when the selected values change.

placeholder"Select..."

string

Placeholder text shown when nothing is selected.

label

string

Label text displayed above the select.

description

string

Helper text displayed below the select.

error

string

Error message displayed below the select.

disabledfalse

boolean

Disables the entire select.

color"blue"

Accent color for chips and focus ring.

startIcon

ReactNode

Icon rendered at the start of the trigger.

maxItems

number

Maximum number of items that can be selected. Remaining options become disabled when the limit is reached.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

--mantle-option-hovergradient

CSS variable

Override the option hover background via style. e.g. style={{ "--mantle-option-hover": "#3b82f6" }}