Поле ввода

Поле ввода на странице приложения настраивается с помощью компонента Input. Внешний вид поля ввода представлен на рисунке ниже.

Тип поля ввода 

Настраивается с помощью свойства inputType.

text

Тип поля ввода — текст. Устанавливается по умолчанию.

"values": {
    ....
    "inputType": "text"
}

password

Тип поля ввода — текст, который отображается символами *. Есть кнопка просмотра введенного текста.

"values": {
    ....
    "inputType": "password"
}

Внешний вид поля ввода 

Настраивается с помощью свойства appearance.

legacy

Отображается только нижняя граница поля ввода. Устанавливается по умолчанию.

"values": {
    ....
    "appearance": "legacy"
}

outline

Отображаются все границы поля ввода.

"values": {
    ....
    "appearance": "outline"
}

Текст подсказки 

Текст подсказки, который отображается в поле до начала ввода текста в него, определяет свойство placeholder.

"values": {
    ....
    "placeholder": "placeholder"
}

Заголовок поля ввода 

Текст заголовка поля ввода определяет свойство label. Расположение заголовка можно настроить с помощью свойства labelPosition.

auto

Автоматический перенос заголовка поля ввода при изменении доступного места для элемента ввода на экране. По умолчанию — слева, при сжатии — сверху.

"values": {
    ....
    "label": "auto",
    "labelPosition": "auto"
}

left

Заголовок отображается слева от поля ввода.

"values": {
    ....
    "label": "left",
    "labelPosition": "left"
}

hidden

Заголовок поля ввода скрыт.

"values": {
    ....
    "label": "hidden",
    "labelPosition": "hidden"
}

above

Заголовок отображается сверху поля ввода.

"values": {
    ....
    "label": "above",
    "labelPosition": "above"
}

Доступность поля ввода 

Доступностью поля ввода управляют свойства disabled и readonly.

disabled

Признак, который управляет доступностью изменения значения поля ввода. По умолчанию — false.

"values": {
    ....
    "disabled": true
}

readonly

Признак, который устанавливает доступность поля ввода только для чтения. По умолчанию — false.

"values": {
    ....
    "readonly": true
}