Select

Displays a list of options for the user to pick from—triggered by a button.

apple

The on_open_change event handler acts in a similar way to the on_change and is called when the open state of the select changes.

The name prop is needed to submit with its owning form as part of a name/value pair.

When the required prop is True, it indicates that the user must select a value before the owning form can be submitted.

Example Form

{}

If using within a Drawer component, set the position prop to "popper" to ensure the select menu is displayed correctly.

High level wrapper for the Select component.

Prop	Type \| Values	Default	Interactive
`size`	`"1" \| "2" \| ...`	`-`
`default_value`	`str`	`-`
`value`	`str`	`-`
`default_open`	`bool`	`-`
`open`	`bool`	`-`
`name`	`str`	`-`
`disabled`	`bool`	`-`	false
`required`	`bool`	`-`	false
`items`	`Sequence`	`-`
`placeholder`	`str`	`-`
`label`	`str`	`-`
`color_scheme`	`"tomato" \| "red" \| ...`	`-`
`high_contrast`	`bool`	`-`	false
`variant`	`"classic" \| "surface" \| ...`	`-`
`radius`	`"none" \| "small" \| ...`	`-`
`width`	`str`	`-`
`position`	`"item-aligned" \| "popper"`	`-`

Trigger	Description
`on_change`	Fired when the value of the select changes.
`on_open_change`	Fired when the select is opened or closed.

Displays a list of options for the user to pick from, triggered by a button.

Prop	Type \| Values	Default	Interactive
`size`	`"1" \| "2" \| ...`	`-`
`default_value`	`str`	`-`
`value`	`str`	`-`
`default_open`	`bool`	`-`
`open`	`bool`	`-`
`name`	`str`	`-`
`disabled`	`bool`	`-`	false
`required`	`bool`	`-`	false

Trigger	Description
`on_change`	Fired when the value of the select changes.
`on_open_change`	Fired when the select is opened or closed.

The button that toggles the select.

Prop	Type \| Values	Default
`variant`	`"classic" \| "surface" \| ...`	`-`
`color_scheme`	`"tomato" \| "red" \| ...`	`-`
`radius`	`"none" \| "small" \| ...`	`-`
`placeholder`	`str`	`-`

The component that pops out when the select is open.

Prop	Type \| Values	Default	Interactive
`variant`	`"solid" \| "soft"`	`-`
`color_scheme`	`"tomato" \| "red" \| ...`	`-`
`high_contrast`	`bool`	`-`	false
`position`	`"item-aligned" \| "popper"`	`-`
`side`	`"top" \| "right" \| ...`	`-`
`side_offset`	`int`	`-`
`align`	`"start" \| "center" \| ...`	`-`
`align_offset`	`int`	`-`

Trigger	Description
`on_close_auto_focus`	Fired when the select content is closed.
`on_escape_key_down`	Fired when the escape key is pressed.
`on_pointer_down_outside`	Fired when a pointer down event happens outside the select content.