Select¶
Dropdown for single-choice selection.
Theme:
Dark
Searchable¶
Country:
United States
Select(
label="Country",
event="form:country",
options=[
Option(label="United States", value="us"),
Option(label="United Kingdom", value="uk"),
Option(label="Canada", value="ca"),
Option(label="Germany", value="de"),
Option(label="France", value="fr"),
Option(label="Japan", value="jp"),
],
selected="us",
searchable=True,
)
Complete Example¶
from pywry import PyWry, Toolbar, Select, Option
app = PyWry()
def on_theme(data, event_type, label):
app.emit("pywry:update-theme", {"theme": data["value"]}, label)
app.emit("pywry:alert", {"message": f"Theme: {data['value']}", "type": "info"}, label)
toolbar = Toolbar(
position="top",
items=[
Select(
label="Theme",
event="settings:theme",
options=[
Option(label="Light", value="light"),
Option(label="Dark", value="dark"),
],
selected="dark",
),
],
)
app.show("<h1>Settings</h1>", toolbars=[toolbar], callbacks={"settings:theme": on_theme})
app.block()
Dynamic Options¶
Update dropdown options based on another selection:
from pywry import PyWry, Toolbar, Select, Option
app = PyWry()
categories = {
"fruits": ["Apple", "Banana", "Orange"],
"vegetables": ["Carrot", "Broccoli", "Spinach"],
}
def on_category(data, event_type, label):
items = categories.get(data["value"], [])
app.emit("toolbar:set-value", {
"componentId": "item-select",
"options": [{"label": i, "value": i.lower()} for i in items],
"value": items[0].lower() if items else None,
}, label)
def on_item(data, event_type, label):
app.emit("pywry:alert", {"message": f"Selected: {data['value']}"}, label)
toolbar = Toolbar(
position="top",
items=[
Select(
label="Category",
event="form:category",
options=[Option(label="Fruits", value="fruits"), Option(label="Vegetables", value="vegetables")],
selected="fruits",
),
Select(
component_id="item-select",
label="Item",
event="form:item",
options=[Option(label="Apple", value="apple"), Option(label="Banana", value="banana"), Option(label="Orange", value="orange")],
selected="apple",
),
],
)
app.show("<h1>Selection</h1>", toolbars=[toolbar], callbacks={"form:category": on_category, "form:item": on_item})
app.block()
Attributes¶
component_id : str | None
Unique identifier for state tracking (auto-generated if not provided)
label : str | None
Display label shown next to the dropdown
description : str | None
Tooltip/hover text for accessibility and user guidance
event : str
Event name emitted on selection change (format: namespace:event-name)
style : str | None
Optional inline CSS
disabled : bool
Whether the dropdown is disabled (default: False)
options : list[Option]
List of Option(label, value) items
selected : str
Currently selected value (default: "")
searchable : bool
Enable a search input to filter dropdown options (default: False)
Events¶
Emits the event name with payload:
value— thevaluestring of the selected option
API Reference¶
Bases: ToolbarItem
A single-select dropdown with optional search.
Emits {value: ..., componentId: ...} on selection change.
Attributes:
| Name | Type | Description |
|---|---|---|
options |
list of Option
|
List of Option items for the dropdown. |
selected |
str
|
Currently selected value. |
searchable |
bool
|
Enable search input to filter options (default: False). |
Examples:
>>> Select(
... label="Theme:",
... event="theme:change",
... options=[
... Option(label="Dark", value="dark"),
... Option(label="Light", value="light"),
... ],
... selected="dark",
... searchable=True,
... )
Functions¶
normalize_options
classmethod
¶
normalize_options(v: Any) -> list[Option]
Accept list of dicts or Option objects.
build_html
¶
Build custom dropdown HTML (not native select, for consistent styling).
auto_generate_component_id
¶
auto_generate_component_id() -> ToolbarItem
Auto-generate component_id based on type if not provided.
validate_event_name
classmethod
¶
Validate event follows namespace:event-name pattern.