Autocomplete

A text input with a filterable dropdown list for selecting from a set of options. Supports labels, error states, and custom empty messages.

Basic

With Label

With Description

Add helper text below the label with the description prop.

Roundness

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

Custom Hover Style

Override the option hover background with the --mantle-option-hover CSS variable. Works with solid colors, gradients, or any CSS background value.

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 autocomplete 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 label.
`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 autocomplete input.

color"blue"

Accent color for focus ring.

label

string

Label text displayed above the input.

description

string

Helper text displayed below the label.

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