Skip to main content
Combobox is a searchable select — a dropdown that lets users type to filter through options. Useful when the list of choices is large enough that scrolling alone would be tedious.

​
Basic Usage

Options are defined as ComboboxOption children. Each option needs a label (displayed) and value (stored in state). When you pass just a string, the value is auto-generated from the label.

​
Reading the Selection

The name prop creates a state key that holds the selected option’s value. Use {{ key }} interpolation to display it anywhere, or reference it in actions and visibility conditions.

​
With Search Placeholder

Customize the placeholder text shown in the search input.

​
Disabled Options

Individual options can be disabled.

​
API Reference

Combobox Parameters

​
placeholder
str | None
default:"None"
Text shown when no value is selected.
​
search_placeholder
str | None
default:"None"
Placeholder text in the search input.
​
name
str | None
default:"None"
State key for the selected value.
​
disabled
bool
default:"False"
Whether the combobox is non-interactive.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

ComboboxOption Parameters

​
label
str
required
Display text. Can be passed as a positional argument.
​
value
str
required
Value stored in state when selected. Defaults to a kebab-case version of the label.
​
disabled
bool
default:"False"
Whether this option is non-selectable.

​
Protocol Reference

Combobox
{
  "type": "Combobox",
  "children?": "[Component]",
  "placeholder?": "string",
  "searchPlaceholder?": "string",
  "name?": "string",
  "disabled?": false,
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}
ComboboxOption
{
  "type": "ComboboxOption",
  "value": "string (required)",
  "label": "string (required)",
  "disabled?": false,
  "cssClass?": "string"
}
For the complete protocol schema, see Combobox, ComboboxOption.