Displays a list of options for the user to pick from—triggered by a button.
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.
Submitting a form using select
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
Using Select within a Drawer component
If using within a Drawer component, set the position prop to "popper" to ensure the select menu is displayed correctly.
API Reference
rx.select
High level wrapper for the Select component.
rx.select.root
Displays a list of options for the user to pick from, triggered by a button.
rx.select.trigger
The button that toggles the select.
rx.select.content
The component that pops out when the select is open.
rx.select.item
The component that contains the select items.
rx.select.label
Used to render the label of a group, it isn't focusable using arrow keys.
Props
No component specific props