The input Element

The input element can be seen as a representation of the HTML <input /> element. It is structured as follows:

{
    "type": "input",
    "tags": array<string>,
    "version": string,
    "key": string,
    "password": boolean,
    "label": ?string,
    "placeholder": ?string,
    "prefill_value": ?string,
    "read_only": boolean,
    "mask": ?array<string>,
    "validator": Validator
}

The password Property

since v1.0.0

The password property contains a boolean that indicates if the input contains sensitive consumer data. It is recommended to not show the clean input value. Instead show e.g. *.

Example of a possible look of an input element with password: true and a label.

The label Property

since v1.0.0

The label property represents a caption for the input.

The placeholder Property

since v1.0.0

The placeholder property specifies a short hint that describes the expected value for the input element.

The prefill_value Property

since v1.0.0

The prefill_value property sets a value to the input element at initialization. If the consumer does not change the value of the input the prefill_value is submitted as the value.

Example of a possible look of an input element with prefill_value and a label.

The read_only Property

since v1.0.0

If the value of the read_only property is true the value of the input can not be changed by the consumer.

Example of a possible look of a read-only input element with label and a prefill_value.

The mask Property

since v1.0.0

The optional mask property enables us to set a specific mask for the input element. The syntax of mask is similar to the text-mask syntax.

Example of a possible look of an input element with label and a credit card mask.

Example

{
    "type": "input",
    "key": "input1",
    "version": "1.0.0",
    "tags": [],
    "password": false,
    "label": "Label",
    "placeholder": "",
    "prefill_value": "prefilled",
    "read_only": false,
    "validator": {
        ...
    }
}

Changelog

1.0.0 - 01.02.2019

• initial version