Input field {#input}

The input element is a field for entering text. It has the same properties as the text element, as well as several additional properties:

• hint_text: Hint text to display in an empty input field.
• hint_color: Hint color.
• highlight_color: Text highlight color. If the value isn't set, the color set in the client will be used instead.
• native_interface: Object. It contains a single color field, which specifies the color of the input field underline.
• keyboard_type: Type of keyboard. The following types are supported (default: multi_line_text):
  • single_line_text
  • multi_line_text
  • phone
  • number
  • email
  • uri
  • password
• select_all_on_focus: Highlight input text when focused.
• mask: Mask for enforcing a specific text input pattern.
• validators: Validator that checks whether the field value meets the specified conditions.

Mask

Text with a fixed number of characters

To set it up, use the following fields:

• always_visible: Display the mask when the input field is empty.
• raw_text_variable: Variable that stores raw user input.
• pattern: String specifying the text input format. For example, for a phone number, you can use the pattern +7 (###) ###-##-## .
• pattern_elements: Array defining the characters that can be substituted with user input.
  • key: Array element to substitute with user input. In the example with the phone number, you need to replace the # characters.
  • placeholder: Character or string to display in an empty input field.
  • regex: Regular expression used to validate input characters.

For a detailed description of parameters for masks with a fixed number of characters, see the element reference.

"mask": {
    "type": "fixed_length",
    "pattern": ...,
    "raw_text_variable": ...,
    "pattern_elements": [
        {
            "key": ... ,
            "regex": ... ,
            "placeholder": ...
        }
    ],
    "always_visible": ...
}

Currency values in a predefined regional format

To set it up, use the following fields:

• raw_text_variable: Variable that stores raw user input.
• locale: IETF BCP 47 language tag that the currency format must match. If no locale is specified, the system will detect it automatically.

The mask automatically formats input values according to regional settings, supports entering numbers with up to two decimal places, and validates input against a pattern.

For a detailed description of parameters for currency value masks, see the element reference.

"mask": {
    "type": "currency",
    "raw_text_variable": ... ,
    "locale": ...
}

Phone numbers with dynamic regional format recognition

To set it up, use the following fields:

• always_visible: Display the mask when the input field is empty.
• raw_text_variable: Variable that stores raw user input.

For a detailed description of parameters for phone number masks, see the element reference.

"mask": {
    "type": "phone",
    "raw_text_variable": ...,
    "always_visible": ...
}

Keyboard behavior

Tapping outside an input field while the keyboard is open will dismiss the keyboard.

Validators

Based on regular expressions

To set it up, use the following fields:

• pattern: Regular expression that the field value must match.
• allow_empty: Determines whether an empty field can be considered valid.
• label_id: ID of a text element containing the error message. This ID is also used for accessibility support.
• variable: Name of the variable that stores the result of the expression.

For a detailed description of parameters for validators based on regular expressions, see the element reference.

{
    "type": "regex",
    "pattern": "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$",
    "allow_empty": false,
    "label_id": "email_validation_error",
    "variable": "email_input"
}

Based on DivKit calculated expressions

To set it up, use the following fields:

• pattern: Calculated expression used to validate the value of a field.
• allow_empty: Determines whether an empty field can be considered valid.
• label_id: ID of a text element containing the error message. This ID is also used for accessibility support.
• variable: Name of the variable that stores the result of the expression.

For a detailed description of parameters for validators based on calculated expressions, see the element reference.

"validators": [
    {
        "type": "expression",
        "condition": ...,
        "allow_empty": ...,
        "label_id": ...,
        "variable": ...
    }
]

Learn more

You can discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_en.

DivKit Repository