Многострочное поле Textarea
Многострочное поле — это поле ввода, в котором текст отображается в несколько строк.
Когда использовать
Используйте многострочное поле, если пользователю нужно ввести много слов. Если значение чаще всего состоит из 1 — 3 слов, следует использовать обычное поле ввода .
Описание работы
По мере ввода высота поля автоматически увеличивается и уменьшается так, что всегда свободна одна строка. Это нужно, чтобы пользователь видел весь текст без скролла, и при этом по умолчанию поле было бы не очень высоким.
При достижении 15 строк (чуть больше половины экрана) поле перестаёт расти и появляется скролл-бар.
Счётчик количества введённых символов
Если есть ограничение по количеству символов и есть большая вероятность, что пользователь его превысит, — включите счётчик символов. Он поможет пользователю подстроиться под ограничение.
Состояния поля
Если поле пустое, оно ничем не отличается от состояния покоя:
Когда поле получает фокус, появляется счётчик символов, чтобы подсказать, какой длины будет текст:
На заблокированном поле счётчик пропадает:
Красная рамка у поля появляется в зависимости от вида валидации.
Достигнув минимального количества символов, счётчик не становится красным:
Когда длина текста превышает допустимую, счётчик становится красным и начинает отсчёт количества символов, введённых сверх лимита:
Если ограничение неочевидное, сделайте подсказку. Клик по иконке откроет тултип.
Название
Требования к названию многострочного поля такие же, как и к однострочного. Если назначение многострочного поля очевидно, то название можно разместить внутри поля в виде плейсхолдера:
Дизайн
Скругления, фокусная рамка и валидация такие же, как и в поле ввода .
Размер и расположение
Минимальная высота многострочного поля ввода — 3 строки, чтобы пользователю было понятно, что это не обычное поле ввода и можно вводить большой текст. Если в форме много таких полей, можно ради экономии пространства уменьшить высоту каждого поля до 2 строк.
Неправильно
Правильно
Правильно задавать высоту поля через html-атрибут «rows». Неправильно задавать высоту через css-атрибут «height», потому что при изменении размера шрифта средствами браузера высота поля не увеличится, и им будет неудобно пользоваться.
Ширина поля должна быть в пределах 30 — 80 символов, то есть около 250 — 600 px. Узким полем неудобно пользоваться из-за частого переноса строк. Широкое поле допустимо только в WYSIWYG-редакторе.
Неправильно
Правильно
Валидация
Поле с ошибкой подсвечивается красной рамкой.
Подробнее о поведении полей ввода с ошибками — в гайде «Валидация».
Доступность
Управление клавиатурой
При клике по полю и при переходе табом поле выглядит одинаково: появляется чёрная рамка или рамка в цвет продукта, которая сохраняется до потери фокуса.