FolderSelector

<- Back to Forms Components

FolderSelector is a folder path input. On desktop it can integrate with native folder selection; on web it behaves as a path field because browser clients cannot browse arbitrary local folders.

Contract¶

Property	Type	Notes
`label`	`str`	Input label.
`value`	`str`	Current folder path. Supports literal, store binding, and data-model binding.
`placeholder`	`str`	Placeholder shown while empty.
`action`	`str` or action object	Optional action emitted on change. Action objects can include `confirm`.

Value collected by actions: str.

Action Confirmation¶

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

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

field = sdk.ui.FolderSelector(
    "confirm_python_folderselector",
    sdk.i18n.t("components.folderselector.confirm.python_label"),
    value="/tmp",
    placeholder=sdk.i18n.t("components.folderselector.confirm.placeholder"),
)
field.set_prop(
    "action",
    {
        "name": "components.folderselector_confirm_action",
        "context": {"source": "python_folderselector"},
        "confirm": {
            "text": sdk.i18n.t("components.folderselector.confirm.prompt"),
            "confirm_text": sdk.i18n.t("components.folderselector.confirm.accept"),
            "cancel_text": sdk.i18n.t("components.folderselector.confirm.cancel"),
        },
    },
)

- kind: FolderSelector
  id: confirm_yaml_folderselector
  label: "@t/components.folderselector.confirm.yaml_label"
  value: "/tmp"
  placeholder: "@t/components.folderselector.confirm.placeholder"
  action:
    name: components.folderselector_confirm_action
    context:
      source: yaml_folderselector
    confirm:
      text: "@t/components.folderselector.confirm.prompt"
      confirm_text: "@t/components.folderselector.confirm.accept"
      cancel_text: "@t/components.folderselector.confirm.cancel"

Example¶

field = sdk.ui.FolderSelector(
    "components_test_forms_folderselector_store",
    label="FolderSelector",
    value=bound.store("/components_test/forms/folderselector/store", scope="page", default="/tmp/demo"),
    placeholder="/tmp",
)

- kind: FolderSelector
  id: components_test_forms_yaml_folderselector
  label: "FolderSelector YAML"
  value: {type: store, scope: page, path: /components_test/forms/folderselector/store, default: "/tmp/demo"}
  placeholder: "/tmp"

Runtime¶

Use collect_input_ids to read the current path. Use value.set, stateUpdate, or dataModelUpdate to change the path from an action.