Democr.ai Plugin Developer Docs

TextField

Previous Next

<- Back to Forms Components

TextField is a single-line text input. Use it for string values such as names, titles, search terms, and short identifiers.

Contract

Property Type Notes
label str Input label.
value str Current text value. Supports literal, store binding, and data-model binding.
placeholder str Placeholder shown while empty.
password bool Renders the field as a password input.
action str or action object Action dispatched when the user presses Enter. Action objects can include confirm.
onChangeAction action object Action dispatched while typing when onChangeMode is a remote/live mode. Action objects can include confirm.
onChangeMode str Dispatch mode for onChangeAction. Remote/live modes include live, autocomplete, search, search_suggest, remote_validate, and remote_preview.

Value collected by actions: str.

Action Confirmation

TextField supports confirmation for both the Enter action and remote/live change action. If the user cancels the dialog, the action is not sent to the backend.

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

field = sdk.ui.TextField(
    "confirm_python_textfield",
    label=sdk.i18n.t("components.textfield.confirm.python_label"),
    value="Python text",
    placeholder=sdk.i18n.t("components.textfield.confirm.placeholder"),
)
field.set_prop(
    "action",
    {
        "name": "components.textfield_confirm_action",
        "context": {"source": "python_enter"},
        "confirm": {
            "text": sdk.i18n.t("components.textfield.confirm.prompt"),
            "confirm_text": sdk.i18n.t("components.textfield.confirm.accept"),
            "cancel_text": sdk.i18n.t("components.textfield.confirm.cancel"),
        },
    },
)

Example

field = sdk.ui.TextField(
    "components_test_forms_textfield_store",
    label="TextField",
    value=bound.store("/components_test/forms/textfield/store", scope="page", default="Draft title"),
    placeholder="Write text",
)
field.set_show_if({
    "conditions": [
        {"left": bound.store("/components_test/forms/visibility/textfield_show", scope="page", default=True), "op": "==", "right": True}
    ]
})
field.set_hide_if({
    "conditions": [
        {"left": bound.store("/components_test/forms/visibility/textfield_hide", scope="page", default=False), "op": "==", "right": True}
    ]
})
field.set_required_permissions(["components.content.view"])

Reading Values

Use a button or submit action with collect_input_ids to read the current value.

button = sdk.ui.Button(
    "read_textfield",
    "Read",
    action="components.forms_test_read",
    params={"key": "textfield", "field_ids": ["components_test_forms_textfield_store"]},
)
button.set_property("collect_input_ids", ["components_test_forms_textfield_store"])

value=bound.store(...) or value=bound.data(...) reads from that source. User edits do not write back automatically; use an action that emits stateUpdate, dataModelUpdate, or a direct property update.

TextArea Toggle