Input

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

В разрешениях 360–767px растягивается по ширине экрана или контента.

Обзор

Базовый компонент представляет собой поле ввода. Для него обязательно должны быть реализованы состояния hover и focus/focus-visible.

Лейблы, сообщения и подсказки

Input может иметь лейбл для определения назначения данного поля. Лейбл должен быть обязательно привязан к конкретному инпуту. Под полем ввода могут располагаться подсказки или сообщения о его статусе.

Для того, чтобы добавить лейбл и сообщение под инпутом, необходимо обернуть VmInput дополнительным компонентом VmInputGroup.

Неактивное состояние и поле только для чтения

Контент в Input может быть недоступен для редактирования. Для этого существуют 2 состояния: disabled или readonly. В состоянии disabled на компонент невозможно навести фокус, также он меняет цвет, содержание инпута невозможно изменить или скопировать, а при наведении курсора он изменяет свой вид. При состоянии readonly компонент не изменяется, но его содержание недоступно для редактирования.

Переключить состояние поля ввода можно написав ему соответствующий атрибут: disabled или readonly.

Состояние статусов

Состояние ошибки не отображается только цветом или только текстом. Обязательно наличие и текста ошибки с иконкой, и изменение цвета поля. Это необходимо для обеспечения доступности.