Select

A dropdown select component for choosing a single value from a list of options. Supports labels, error states, and disabled options.

Basic

With Label

With Error

Sizes

Controlled

With Icon

With Description

Helper text below the select for additional context.

Country Selector

A rich select with flag emojis and a Globe icon.

Role Assignment

Assign user roles with emoji indicators and a disabled guest option.

Disabled

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 value (controlled).
`defaultValue`	`string`	—	The initially selected value (uncontrolled).
`onValueChange`	`(value: string) => void`	—	Called when the selected value changes.
`placeholder`	`string`	—	Placeholder text shown when no value is selected.
`disabled`	`boolean`	`false`	Disables the select.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for focus ring.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size preset.
`label`	`string`	—	Label text displayed above the select.
`description`	`string`	—	Helper text displayed below the select.
`error`	`string`	—	Error message displayed below the select.
`startIcon`	`ReactNode`	—	Icon rendered at the start of the trigger button.
`--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 value (controlled).

defaultValue

string

The initially selected value (uncontrolled).

onValueChange

(value: string) => void

Called when the selected value changes.

placeholder

string

Placeholder text shown when no value is selected.

disabledfalse

boolean

Disables the select.

color"blue"

Accent color for focus ring.

size"md"

"sm" | "md" | "lg"

Size preset.

label

string

Label text displayed above the select.

description

string

Helper text displayed below the select.

error

string

Error message displayed below the select.

startIcon

ReactNode

Icon rendered at the start of the trigger button.

--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" }}