Skip to main content
Select dropdowns let users pick one option from a collapsible list. The selected option’s value string is stored in client state, accessible via .rx.

​
Basic Usage

A Select is a container — use the with block to add SelectOption children. Each option needs a value (what gets stored) and a label (what the user sees):

​
Pre-selected Option

Mark an option as selected=True to have it chosen when the component first renders:

​
Sizes

Selects come in two sizes. The "sm" variant is useful when space is tight or when embedding a select alongside other compact controls:

​
With Label

Pair a Select with a Label in a Column for a standard form field pattern:

​
Disabled State

​
Disabled Options

Individual options can be disabled while the rest of the dropdown remains interactive. Disabled options appear dimmed and cannot be selected:

​
Invalid State

Set invalid=True to flag a select with error styling. Pair it with a Label in a form layout to signal that a selection is required or incorrect:

​
Option Groups

Organize long option lists into labeled sections with SelectGroup and SelectLabel. Use SelectSeparator to add visual dividers between groups:

​
Reading the Value

Use .rx to get a reactive reference to the selected option’s value string. When the user picks an option, anything bound to .rx updates automatically: Pick an option and the text updates instantly. The .rx reference holds the value string of whichever option is selected — "magrathea", "betelgeuse", etc. — not the display label.

​
Actions

The on_change parameter fires actions when the selection changes. Inside the action, $event holds the newly selected value string: This is different from .rx — here we’re transforming the value before storing it (prepending “You chose: ”). For simple “show the current selection” cases, .rx is the better approach.

​
API Reference

Select Parameters

​
str | None
default:"None"
Placeholder text shown when no option is selected.
​
str | None
default:"None"
State key for the selected value. Auto-generated if not provided.
​
str
default:"default"
Select size: "default", "sm".
​
str | None
default:"None"
Which side of the trigger the dropdown appears on: "top", "right", "bottom", "left".
​
str | None
default:"None"
Alignment of the dropdown relative to the trigger: "start", "center", "end".
​
bool
default:"False"
Whether the select is non-interactive.
​
bool
default:"False"
Whether a selection is required for form submission.
​
bool
default:"False"
Whether the select shows error styling (red border).
​
Action | list[Action] | None
default:"None"
Action(s) to execute when the selection changes. $event is the value string of the selected option.
​
str | None
default:"None"
Additional Tailwind CSS classes.

SelectGroup Parameters

​
str | None
default:"None"
Additional Tailwind CSS classes.

SelectLabel Parameters

​
str
required
Display text for the group header.
​
str | None
default:"None"
Additional Tailwind CSS classes.

SelectSeparator Parameters

​
str | None
default:"None"
Additional Tailwind CSS classes.

SelectOption Parameters

​
str
required
The value stored in state when this option is selected.
​
str
required
Display text shown to the user.
​
bool
default:"False"
Whether this option is initially selected.
​
bool
default:"False"
Whether this option is non-interactive.
​
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Select
SelectGroup
SelectLabel
SelectSeparator
SelectOption
For the complete protocol schema, see Select, SelectGroup, SelectLabel, SelectSeparator, SelectOption.