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.

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

Follow DivKit news in the Telegram channel: http://t.me/divkit_news

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

DivKit Repository