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

It is possible to disable individual items in a select using the disabled prop associated with the rx.select.item.

To prevent the user from interacting with select entirely, set the disabled prop to True on the rx.select.root component.

It is possible to set several default values when constructing a select.

The placeholder prop in the rx.select.trigger specifies the content that will be rendered when value or default_value is empty or not set.

The default_value in the rx.select.root specifies the value of the select when initially rendered. The default_value should correspond to the value of a child rx.select.item.

The on_change event trigger is fired when the value of the select changes. In this example the rx.select_root value prop specifies which item is selected, and this can also be controlled using state and a button without direct interaction with the select component.

The open prop and on_open_change event trigger work similarly to value and on_change to control the open state of the select. If on_open_change handler does not alter the open prop, the select will not be able to be opened or closed by clicking on the select_trigger.

When a select is part of a form, the name prop of the rx.select.root sets the key that will be submitted with the form data.

The value prop of rx.select.item provides the value to be associated with the name key when the form is submitted with that item selected.

When the required prop of the rx.select.root is True, it indicates that the user must select a value before the form may be submitted.