Skip to main content
The Select component provides an accessible dropdown menu for selecting values from a list of options.

​
Basic Usage

import reflex_ui as ui

ui.select(
    items=["Option 1", "Option 2", "Option 3"],
    placeholder="Select an option"
)

​
Sizes

Select supports 5 different sizes: 
ui.select(items=["A", "B", "C"], size="xs")
ui.select(items=["A", "B", "C"], size="sm")
ui.select(items=["A", "B", "C"], size="md")  # Default
ui.select(items=["A", "B", "C"], size="lg")
ui.select(items=["A", "B", "C"], size="xl")
​
size
Literal['xs', 'sm', 'md', 'lg', 'xl']
default:"md"
The size of the select component

​
Controlled Value

class State(rx.State):
    selected: str = ""

ui.select(
    items=["Apple", "Banana", "Cherry"],
    value=State.selected,
    on_value_change=State.set_selected,
    placeholder="Choose a fruit"
)

​
Event Handlers

ui.select(
    items=[f"Item {i}" for i in range(1, 11)],
    placeholder="Select item",
    on_value_change=lambda value: rx.toast.success(f"Selected: {value}"),
    on_open_change=lambda open: rx.toast.info(f"Menu {'opened' if open else 'closed'}")
)

​
Props Reference

​
items
list[str] | Var[list[str]]
required
List of items to display in the dropdown
​
placeholder
str
Text shown when no item is selected
​
value
Any
Currently selected value (controlled)
​
default_value
Any
Initial selected value (uncontrolled)
​
on_value_change
EventHandler[str]
Event fired when selection changes
​
on_open_change
EventHandler[bool]
Event fired when dropdown opens or closes
​
disabled
bool
default:"False"
Disables the select component
​
name
str
Form field name for submission
​
required
bool
default:"False"
Makes selection required for form submission
​
read_only
bool
default:"False"
Prevents changing the selection
​
multiple
bool
default:"False"
Allows selecting multiple items

​
Positioning

​
side
Literal['bottom', 'top', 'left', 'right', 'inline-end', 'inline-start']
default:"bottom"
Which side of the trigger to position the dropdown
​
align
Literal['start', 'center', 'end']
default:"center"
How to align the dropdown relative to the trigger
​
side_offset
int
default:"4"
Distance between trigger and dropdown in pixels
​
modal
bool
default:"True"
When True, locks page scroll and disables outside interactions

​
Advanced Composition

For complex use cases, use the compositional API: 
ui.select.root(
    ui.select.trigger(
        render_=ui.button(
            ui.select.value(placeholder="Choose"),
            ui.select.icon(arrow_icon),
            variant="outline"
        )
    ),
    ui.select.portal(
        ui.select.positioner(
            ui.select.popup(
                ui.select.item("Option 1", value="opt1"),
                ui.select.item("Option 2", value="opt2"),
                ui.select.item("Option 3", value="opt3")
            )
        )
    ),
    on_value_change=handle_change
)

​
Real Example

From demo at demo/demo.py:47: 
ui.select(
    items=[f"Item {i}" for i in range(1, 11)],
    name="select",
    placeholder="Hello",
    on_value_change=lambda value: rx.toast.success(f"Value: {value}"),
    on_open_change=lambda value: rx.toast.success(f"Open: {value}")
)

​
Select Components

  • select.root - Container for all select parts
  • select.trigger - Button that opens the dropdown
  • select.value - Displays the selected value
  • select.icon - Icon indicating dropdown state
  • select.portal - Portals dropdown to body
  • select.positioner - Positions the dropdown
  • select.popup - Container for items
  • select.item - Individual selectable item
  • select.item_text - Text content of an item
  • select.item_indicator - Shows which item is selected
  • select.group - Groups related items
  • select.group_label - Label for a group
  • select.separator - Visual separator between items

​
Implementation Details

From source code at reflex_ui/components/base/select.py:466:
  • Built on Base UI Select primitives
  • High-level wrapper auto-generates items with foreach
  • Items rendered as buttons with indicator icons
  • Supports both static and reactive item lists
  • Keyboard navigable with arrow keys

Build docs developers (and LLMs) love

Get started for freeTalk to us