ui.select

Select

A styled dropdown for short lists: one value or several, custom option bodies, and a change that runs Python.

Pick one

Options are plain strings, or (value, label) pairs when what you store is not what you show.

Country

Currency

def pick_one() -> None:
    with ui.grid(cols={"base": 1, "sm": 2}, gap="md", classes="w-full max-w-xl"):
        with ui.form_field(label="Country"):
            ui.select(COUNTRIES, placeholder="Select a country")
        with ui.form_field(label="Currency"):
            ui.select(["EUR", "GBP", "USD", "CHF"], value="EUR")

A disabled option

An option as a dict can carry disabled=True: it stays visible, but cannot be picked.

Plan

Enterprise is set up with our team.

def plans() -> None:
    with ui.form_field(label="Plan", hint="Enterprise is set up with our team.",
                       classes="max-w-xs"):
        ui.select(PLANS, value="team")

Several values

multiple=True shows the picks as pills; bulk_actions adds Select all and Clear to the panel.

Alert me by

def several() -> None:
    with ui.form_field(label="Alert me by", classes="max-w-sm"):
        ui.select(CHANNELS, multiple=True, bulk_actions=True,
                  value=["email", "slack"], placeholder="Pick channels")

Custom option bodies

render= draws the inside of each option — here a coloured badge per priority.

Priority

def custom_options() -> None:
    with ui.form_field(label="Priority", classes="max-w-xs"):
        ui.select([("urgent", "Urgent"), ("high", "High"),
                   ("normal", "Normal"), ("low", "Low")],
                  value="normal", render=priority_option)

Filter a list

on_change sends the status to Python; only the list re-renders.

Invoices

INV-2041Northwind Traders

€4,280.00Paid

INV-2040Lumen Studio

€1,150.00Pending

INV-2039Atlas Freight

€9,600.00Overdue

INV-2038Kinfolk & Co

€720.00Paid

INV-2037Harbor Health

€2,310.00Pending

class InvoiceFilter(PageState):
    status: str = field(default="all")


def filter_changed(filters: InvoiceFilter) -> None:
    """The typed parameter receives the new status; the list follows."""


@refreshable(deps=[InvoiceFilter])
def invoice_list() -> None:
    status = InvoiceFilter().status
    rows = [i for i in INVOICES if status in ("all", i[3])]
    with ui.vstack(gap="sm"):
        for number, customer, amount, state in rows:
            with ui.hstack(gap="md", justify="between"):
                with ui.hstack(gap="sm"):
                    ui.text(number, color="muted", size="sm", classes="font-mono")
                    ui.text(customer, weight="medium")
                with ui.hstack(gap="sm"):
                    ui.text(amount)
                    ui.badge(state.capitalize(), color=STATUS_COLOR[state],
                             variant="soft", size="sm")


def live_filter() -> None:
    with ui.card(padding="md", classes="w-full max-w-xl"), ui.vstack(gap="md"):
        with ui.hstack(justify="between"):
            ui.heading("Invoices", level=3, size="md")
            ui.select([("all", "All statuses"), ("paid", "Paid"),
                       ("pending", "Pending"), ("overdue", "Overdue")],
                      value=InvoiceFilter().status, on_change=filter_changed,
                      size="sm", classes="w-48")
        invoice_list()

Sizes and disabled

def sizes_and_states() -> None:
    with ui.vstack(gap="sm", classes="w-full max-w-xs"):
        for size in ("xs", "sm", "md", "lg", "xl"):
            ui.select(["Daily", "Weekly", "Monthly"], size=size,
                      placeholder=f"Report frequency ({size})")
        ui.select(["Daily", "Weekly", "Monthly"], value="Weekly", disabled=True)