ComboBox

An alias for the Autocomplete component. A text input with a filterable dropdown list for selecting from a set of options.

Basic

With Description

Helper text below the input with the description prop.

Roundness

Override --mantle-radius-md to change the input border-radius.

Custom Hover

Override the dropdown hover effect with --mantle-option-hover.

Props

Prop	Type	Default	Description
`options`	`{ value: string; label: string }[]`	—	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 entered.
`disabled`	`boolean`	`false`	Disables the combo box input.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for focus ring.
`label`	`string`	—	Label text displayed above the input.
`description`	`string`	—	Helper text displayed below the input.
`error`	`string`	—	Error message displayed below the input.
`emptyMessage`	`string`	`"No results found"`	Message displayed when no options match the search query.
`--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 }[]

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

disabledfalse

boolean

Disables the combo box input.

color"blue"

Accent color for focus ring.

label

string

Label text displayed above the input.

description

string

Helper text displayed below the input.

error

string

Error message displayed below the input.

emptyMessage"No results found"

string

Message displayed when no options match the search query.

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