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

{}

High level wrapper for the Select component.

Prop	Type \| Values	Interactive
`items`	`List`
`placeholder`	`str`
`label`	`str`
`color_scheme`	`"tomato" \| "red" \| ...`
`high_contrast`	`bool`	false
`variant`	`"classic" \| "surface" \| ...`
`radius`	`"none" \| "small" \| ...`
`width`	`str`
`position`	`"item-aligned" \| "popper"`
`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`	Props to rename 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	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`	Props to rename 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	Interactive
`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	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.