Select

Overview

Select allows the user to choose from a list of values and is based on the Angular Material select component.

Examples

import mesop as me


@me.stateclass
class State:
  selected_values: list[str]


def on_selection_change(e: me.SelectSelectionChangeEvent):
  s = me.state(State)
  s.selected_values = e.values


@me.page(
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/select_demo",
)
def app():
  me.text(text="Select")
  me.select(
    label="Select",
    options=[
      me.SelectOption(label="label 1", value="value1"),
      me.SelectOption(label="label 2", value="value2"),
      me.SelectOption(label="label 3", value="value3"),
    ],
    on_selection_change=on_selection_change,
    style=me.Style(width=500),
    multiple=True,
  )
  s = me.state(State)
  me.text(text="Selected values: " + ", ".join(s.selected_values))

API

select

Creates a Select component.

PARAMETER	DESCRIPTION
options	List of select options. TYPE: Iterable[SelectOption] DEFAULT: ()
on_selection_change	Event emitted when the selected value has been changed by the user. TYPE: Callable[[SelectSelectionChangeEvent], Any] | None DEFAULT: None
on_opened_change	Event emitted when the select panel has been toggled. TYPE: Callable[[SelectOpenedChangeEvent], Any] | None DEFAULT: None
disabled	Whether the select is disabled. TYPE: bool DEFAULT: False
disable_ripple	Whether ripples in the select are disabled. TYPE: bool DEFAULT: False
multiple	Whether multiple selections are allowed. TYPE: bool DEFAULT: False
tab_index	Tab index of the select. TYPE: int DEFAULT: 0
placeholder	Placeholder to be shown if no value has been selected. TYPE: str DEFAULT: ''
value	Value of the select control. TYPE: str DEFAULT: ''
style	Style. TYPE: Style | None DEFAULT: None
key	The component key. TYPE: str | None DEFAULT: None

SelectOption dataclass

Represents an option within a select component.

ATTRIBUTE	DESCRIPTION
label	The content shown for the select option. TYPE: str | None
value	The value associated with the select option. TYPE: str | None

SelectSelectionChangeEvent dataclass

Bases: MesopEvent

Event representing a change in the select component's value(s).

ATTRIBUTE	DESCRIPTION
values	New values of the select component after the change. TYPE: list[str]
key	Key of the component that emitted this event. TYPE: str

value property

Shortcut for returning a single value.

SelectOpenedChangeEvent dataclass

Bases: MesopEvent

Event representing the opened state change of the select component.

ATTRIBUTE	DESCRIPTION
opened	A boolean indicating whether the select component is opened (True) or closed (False). TYPE: bool
key	key of the component that emitted this event. TYPE: str