Select

Select lets the user choose one or more values from a declared option list.

Contract¶

Property	Type	Notes
`label`	`str`	Input label.
`options`	`list[dict]`	Option entries with `label` and `value`.
`value`	`Any`	Current selected value. Use `str` for single select and `list[str]` for `multiple=true`.
`placeholder`	`str`	Placeholder for the empty state.
`multiple`	`bool`	Enables multiple selected values.
`searchable`	`bool`	Select-level searchable flag. `Combobox` is the dedicated searchable single-select component.
`max_width`	`int \| None`	Optional width constraint.
`action` / `params`	`str` or action object / `dict`	Optional action emitted on change. Action objects can include `confirm`.

Value collected by actions: str when multiple=false, list[str] when multiple=true.

Action Confirmation¶

Use an action object with confirm to require confirmation before the selection change action is dispatched. If the user cancels the dialog, no backend action is sent and the selection keeps its previous value.

The component test page exposes a select action counter and the last received payload so dispatch can be checked directly after confirming.

field = sdk.ui.Select(
    "confirm_python_select",
    label=sdk.i18n.t("components.select.confirm.python_label"),
    options=[
        {"label": sdk.i18n.t("components.choice.confirm.option_alpha"), "value": "alpha"},
        {"label": sdk.i18n.t("components.choice.confirm.option_beta"), "value": "beta"},
        {"label": sdk.i18n.t("components.choice.confirm.option_gamma"), "value": "gamma"},
    ],
    value="alpha",
    placeholder=sdk.i18n.t("components.select.confirm.placeholder"),
)
field.set_prop(
    "action",
    {
        "name": "components.select_confirm_action",
        "context": {"source": "python_select"},
        "confirm": {
            "text": sdk.i18n.t("components.select.confirm.prompt"),
            "confirm_text": sdk.i18n.t("components.select.confirm.accept"),
            "cancel_text": sdk.i18n.t("components.select.confirm.cancel"),
        },
    },
)

- kind: Select
  id: confirm_yaml_select
  label: "@t/components.select.confirm.yaml_label"
  value: alpha
  placeholder: "@t/components.select.confirm.placeholder"
  options:
    - label: "@t/components.choice.confirm.option_alpha"
      value: alpha
    - label: "@t/components.choice.confirm.option_beta"
      value: beta
    - label: "@t/components.choice.confirm.option_gamma"
      value: gamma
  action:
    name: components.select_confirm_action
    context:
      source: yaml_select
    confirm:
      text: "@t/components.select.confirm.prompt"
      confirm_text: "@t/components.select.confirm.accept"
      cancel_text: "@t/components.select.confirm.cancel"

Example¶

options = [
    {"label": "Draft", "value": "draft"},
    {"label": "Published", "value": "published"},
    {"label": "Archived", "value": "archived"},
]

single = sdk.ui.Select(
    "components_test_forms_select_store",
    label="Select",
    options=options,
    value=bound.store("/components_test/forms/select/store", scope="page", default="draft"),
    placeholder="Choose status",
)

multiple = sdk.ui.Select(
    "components_test_forms_select_multiple_store",
    label="Select multiple",
    options=options,
    value=bound.store("/components_test/forms/select_multiple/store", scope="page", default=["draft", "archived"]),
    multiple=True,
)

- kind: Select
  id: components_test_forms_yaml_select
  label: "Select YAML"
  value: {type: store, scope: page, path: /components_test/forms/select/store, default: draft}
  options:
    - label: "Draft"
      value: draft
    - label: "Published"
      value: published

- kind: Select
  id: components_test_forms_yaml_select_multiple
  label: "Select multiple YAML"
  value: {type: store, scope: page, path: /components_test/forms/select_multiple/store, default: [draft, archived]}
  multiple: true
  options:
    - label: "Draft"
      value: draft
    - label: "Published"
      value: published
    - label: "Archived"
      value: archived

Runtime¶

Use collect_input_ids to read the selected value. Use value.set property updates, stateUpdate, or dataModelUpdate to change the selection from an action.