ui.combobox

Combobox

A select with a search box, for lists too long to scroll: type a few letters, pick one value or many.

Search a long list

Typing filters the options; accents and word order do not matter.

Country of residence

def search_a_long_list() -> None:
    with ui.form_field(label="Country of residence", classes="max-w-xs"):
        ui.combobox(COUNTRIES, placeholder="Search 24 countries…")

Several values

multiple=True shows the picks as pills; empty_text is what the panel says when nothing matches.

Skills

Used to suggest reviewers.

def several_values() -> None:
    with ui.form_field(label="Skills", hint="Used to suggest reviewers.",
                       classes="max-w-sm"):
        ui.combobox(SKILLS, multiple=True, bulk_actions=True,
                    value=["python", "sql"], placeholder="Add skills…",
                    empty_text="No skill with that name.")

Options with avatars

render= draws each option — the search still runs on the label.

Assignee

def assignee() -> None:
    with ui.form_field(label="Assignee", classes="max-w-xs"):
        ui.combobox(PEOPLE, value="omar", render=person_option,
                    placeholder="Assign to…")

A pick that runs Python

on_change sends the value to Python; the account card re-renders.

NT

Northwind TradersSeattle · €48,200 ARR

Enterprise

class PickedAccount(PageState):
    account: str = field(default="northwind")


def account_picked(pick: PickedAccount) -> None:
    """The typed parameter receives the new account; the card follows."""


@refreshable(deps=[PickedAccount])
def account_card() -> None:
    name, city, revenue, plan = ACCOUNTS[PickedAccount().account or "northwind"]
    with ui.hstack(gap="md"):
        ui.avatar(name=name, size="lg", color="primary")
        with ui.vstack(gap="none"):
            ui.text(name, weight="semibold", size="lg")
            ui.text(f"{city} · {revenue}", color="muted")
        ui.badge(plan, variant="soft", classes="ml-auto")


def live_pick() -> None:
    with ui.card(padding="md", classes="w-full max-w-md"), ui.vstack(gap="md"):
        ui.combobox([(key, row[0]) for key, row in ACCOUNTS.items()],
                    value=PickedAccount().account, on_change=account_picked,
                    placeholder="Find an account…")
        account_card()

Your own trigger

trigger= replaces the field with any component — a small button in a toolbar, here.

Issue #4821 · Export fails on large workspaces

def custom_trigger() -> None:
    with ui.hstack(gap="md"):
        ui.text("Issue #4821 · Export fails on large workspaces", weight="medium")
        ui.combobox(LABELS, multiple=True, placeholder="Filter labels…",
                    trigger=ui.button("Labels", icon_left="tag", size="sm",
                                      variant="outline"))