MultiSelect

A dropdown that allows selecting multiple options from a list.

Categories:

Technology, Finance

All None

Technology Finance Healthcare Energy

Basic Usage

from pywry import MultiSelect, Option

categories = MultiSelect(
    label="Categories",
    event="filter:categories",
    options=[
        Option(label="Technology", value="tech"),
        Option(label="Finance", value="finance"),
        Option(label="Healthcare", value="health"),
        Option(label="Energy", value="energy"),
    ],
    selected=["tech", "finance"],  # Default selections
)

Selected Values

from pywry import MultiSelect, Option

MultiSelect(
    label="Tags",
    event="item:tags",
    options=[
        Option(label="Tag 1", value="tag1"),
        Option(label="Tag 2", value="tag2"),
    ],
    selected=["tag1"],  # Pre-selected values
)

Select All Pattern

from pywry import PyWry, Toolbar, MultiSelect, Option

app = PyWry()
options = [
    Option(label="All", value="all"),
    Option(label="Technology", value="tech"),
    Option(label="Finance", value="finance"),
    Option(label="Healthcare", value="health"),
]

def on_multi_change(data, event_type, label):
    selected = data.get("values", [])
    if "all" in selected:
        # "All" is selected - select everything
        all_values = [opt.value for opt in options if opt.value != "all"]
        app.emit("toolbar:set-value", {
            "componentId": "category-select",
            "value": all_values
        }, label)
    elif not selected:
        # Nothing selected
        app.emit("pywry:alert", {"message": "No categories selected", "type": "info"}, label)

app.show(
    "<h1>Category Filter</h1>",
    toolbars=[
        Toolbar(position="top", items=[
            MultiSelect(
                component_id="category-select",
                label="Categories",
                event="filter:categories",
                options=options,
            )
        ])
    ],
    callbacks={"filter:categories": on_multi_change},
)

Tag Selection

from pywry import MultiSelect, Option

tags = MultiSelect(
    label="Tags",
    event="post:tags",
    options=[
        Option(label="📊 Data", value="data"),
        Option(label="📈 Charts", value="charts"),
        Option(label="🔧 Tools", value="tools"),
        Option(label="📚 Tutorial", value="tutorial"),
    ],
)

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 : list[str]
    Currently selected values (default: [])

Events

Emits the event name with payload:

{"values": ["tech", "finance"], "componentId": "multiselect-abc123"}

• values — list of all currently selected values

MultiSelect vs Select

Component	Selection	Use Case
Select	Single	Mutually exclusive choices
MultiSelect	Multiple	Filters, tags, permissions

API Reference

For complete parameter documentation, see the MultiSelect API Reference.