Skip to content

MultiSelect

A dropdown that allows selecting multiple options from a list.

Categories:
Technology, Finance

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

Bases: ToolbarItem

A multi-select dropdown with checkboxes.

Emits {values: [...], componentId: ...} on selection change.

Selected items appear at the top of the dropdown, unselected items below.

Attributes:

Name Type Description
options list of Option

List of Option items for the dropdown.

selected list of str

Currently selected values.

Examples:

>>> MultiSelect(
...     label="Columns:",
...     event="columns:filter",
...     options=[Option(label="Name"), Option(label="Age"), Option(label="City")],
...     selected=["Name", "Age"],
... )

Functions

normalize_options classmethod

normalize_options(v: Any) -> list[Option]

Accept list of dicts or Option objects.

normalize_selected classmethod

normalize_selected(v: Any) -> list[str]

Convert single string to list.

build_html

build_html() -> str

Build multiselect dropdown HTML with checkboxes.

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_name(v: str) -> str

Validate event follows namespace:event-name pattern.