A select component displays a dropdown list of options for the user to pick one from. It's one of the most common form controls in web applications, use it whenever you need a user to choose a single value from a predefined list and screen space is limited.

Reflex's rx.select is a fully-featured, accessible dropdown built on Radix UI primitives. It works with simple option lists or full state-bound bindings, supports form integration, keyboard navigation, and works out-of-the-box on desktop and mobile.

Use rx.select when:

• You have more than five options and need to save vertical space
• The user should choose exactly one option from a predefined list
• You want a consistent dropdown that matches your app's theme

Consider alternatives when:

• You have fewer than five options → use Radio Group for better visibility
• Users need to select multiple values → use Checkbox groups or a multi-select pattern
• Users should type a value rather than choose one → use Input
• You need hierarchical or searchable options → use the low-level Select API with custom content

At its simplest, pass a list of string options. The component renders a dropdown button that opens a menu of choices.

The user can click the trigger button to open the dropdown and choose a different option.

In most real apps, you need to react when the user selects a value, to filter data, update a chart, save to a database, or trigger another event. Bind the select to a State var using the value prop and an on_change event handler.

This is the most common pattern. Because the select is bound to a state var, the value always reflects what's stored there, you can update it from anywhere in your app, and the select will re-render automatically.

If you just need the select to start with a specific option chosen, without tracking the user's choice in state, use default_value. This is the simplest pattern when you only care about the value at form submission time, or when you don't need the selected value to affect anything else in your app.

When you want the select to start empty, prompting the user to make a choice, omit default_value and provide a placeholder.

Real applications rarely have hardcoded options. More often, options come from a database, API, or calculated from other state. Pass a state var as the options list, and the dropdown updates whenever the list changes.

To prevent user interaction, set disabled=True. The select renders with a muted appearance and cannot be opened.

To disable individual items rather than the whole select, use the low-level API and set disabled=True on specific rx.select.item components.

Select components integrate cleanly with Reflex forms. The name prop sets the key used when the form is submitted, and required=True prevents submission until the user makes a choice.

For full details on building forms, validation, and submission handling, see the Form documentation.

When your options have separate display labels and underlying values (e.g., a user ID for the value, a name for the label), use a computed var to map between them.

For native label/value separation in the dropdown itself, use the low-level Select API and pass value= and a display label child to each rx.select.item.

When placing a select inside a Dialog or other portal-based container, set position="popper" on the select so the dropdown menu positions itself correctly above the overlay content.

Beyond on_change, the on_open_change event fires when the dropdown opens or closes. Use this to trigger analytics, prefetch data, or animate related UI.

The example below uses rx.cond to swap between two badges based on whether the dropdown is open.

A classic use case, the select controls what data is displayed elsewhere on the page.

When one select's options depend on another's value, a common pattern for country/state, category/subcategory, etc.

• Radio Group - inline single-selection for fewer than 5 options
• Checkbox - single or multi-selection with visible state
• Form - grouping selects with other inputs for submission
• Dialog - modal dialogs that can contain selects
• Low-level Select API - fine-grained control over trigger, content, and items

• State Management - how Reflex components track and update values
• Event Handlers - understanding on_change, on_open_change, and related triggers
• Forms and Validation - building complete forms with typed, validated inputs
• Computed Vars - deriving values from state for dynamic options and lookups