Текстовое поле — это компонент, позволяющий пользователю вводить и редактировать текст. Данный элемент является одним из наиболее часто используемых в интерфейсе, ведь он применяется при проектировании как простых компонентов, например поля поиска, так и очень сложных, таких, как многоступенчатая форма.
Базовая анатомия
Данный элемент представляет собой контейнер с четкими визуальными границами, которые достигаются с помощью обводки или отличающегося фона. Метка всегда остается видимой, даже когда пользователь вводит текст. Внутринние отступы должны обеспечивать комфортное чтение и редактирование.
Анатомия с дополнительными элементами
При необходимости поле можно дополнить вспомогательными элементами, например: счетчиком символов, кнопкой очистки или индикатором валидации. Чаще всего данные элементы размещаются справа или снизу от основной области, чтобы не мешать процессу ввода. Подсказка (placeholder) может временно занимать пустое поле, но в момент начала ввода текста скрыться. Кроме того, плейсхолдер не должен заменять метку, это является грубой ошибкой.
Текстовое поле должно менять свой внешний вид, в зависимости от взаимодействия с пользователем, чтобы помочь ему понять текущее состояние.
Default
В исходном состоянии поле готово к вводу. Границы и метка имеют нейтральный цвет, не создающий сильный контраст с другими элементами.
Hover
При наведении курсора поле может немного изменить внешний вид, подсказывая о возможности взаимодействия. Можно добавить небольшое изменение цвета фона, обводки или добавление мягкой тени.
Active
При нажатии на поле ввода границы области стоит сделать более заметными, например, с помощью более акцентного цвета. Курсор ввода должен быть четко виден на фоне поля.
Disabled
Неактивное поле визуально отличается пониженным контрастом и отсутствием интерактивных эффектов, однако, важно сохранить читаемость уже введенного текста.
