Select

Overview

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

Examples

from dataclasses import field

import mesop as me


@me.stateclass
class State:
  selected_values_1: list[str] = field(
    default_factory=lambda: ["value1", "value2"]
  )
  selected_values_2: str = "value1"


def on_selection_change_1(e: me.SelectSelectionChangeEvent):
  s = me.state(State)
  s.selected_values_1 = e.values


def on_selection_change_2(e: me.SelectSelectionChangeEvent):
  s = me.state(State)
  s.selected_values_2 = e.value


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/select_demo",
)
def app():
  state = me.state(State)
  with me.box(style=me.Style(margin=me.Margin.all(15))):
    me.select(
      label="Select multiple",
      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_1,
      style=me.Style(width=500),
      multiple=True,
      appearance="outline",
      value=state.selected_values_1,
    )
    me.text(
      text="Selected values (multiple): " + ", ".join(state.selected_values_1)
    )

    me.select(
      label="Select single",
      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_2,
      style=me.Style(width=500, margin=me.Margin(top=40)),
      multiple=False,
      appearance="outline",
      value=state.selected_values_2,
    )
    me.text(text="Selected values (single): " + state.selected_values_2)

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: ''
appearance	The form field appearance style. TYPE: Literal['fill', 'outline'] DEFAULT: 'fill'
value	Value(s) of the select control. TYPE: list[str] | 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