Многострочное поле Textarea

Многострочное поле — это поле ввода, в котором текст отображается в несколько строк.

Используйте многострочное поле, если пользователю нужно ввести много слов. Если значение чаще всего состоит из 1–3 слов, следует использовать обычное поле ввода .

Требования к названию многострочного поля такие же, как и к однострочного. Если назначение многострочного поля очевидно, то название можно разместить внутри поля в виде плейсхолера:

По мере ввода высота поля автоматически увеличивается и уменьшается так, что всегда свободна одна строка. Это нужно, чтобы пользователь видел весь текст без прокрутки, и при этом по умолчанию поле было бы не очень высоким.

При достижении 15 строк (чуть больше половины экрана) поле перестает расти и появляется полоса прокрутки.

Если есть ограничение по количеству символов и есть большая вероятность, что пользователь его превысит — включите счётчик символов. Он поможет пользователю подстроиться под ограничение.

Состояния поля

Если поле пустое, оно ничем не отличается состоянии покоя:

Когда поле получает фокус, появляется счётчик символов, чтобы подсказать какой длины будет текст:

На заблокированом поле счётчик пропадает:

Красная рамка у поля появляется в зависимости от вида валидации.

Достигнув минимального количества символов счётчик не становится красный:

Когда длина текста превышает допустимую, счётчик становится красным и начинает отсчёт количества символов введенных сверх лимита:

Если ограничение неочевидное, сделайте подсказку. Клик по иконке откроет тултип.

Минимальная высота многострочного поля ввода — 3 строки, чтобы пользователю было понятно, что это не инпут, и можно вводить большой текст. Если в форме много таких полей, можно ради экономии пространства уменьшить высоту каждого поля до 2 строк.

Неправильно

Правильно

Правильно задавать высоту поля через html-атрибут «rows». Неправильно задавать высоту через css-атрибут «height», потому что при изменении размера шрифта средствами браузера высота поля не увеличится, и им будет неудобно пользоваться.

Ширина поля должна быть в пределах 30–80 символов, то есть около 250–600 px. Узким полем неудобно пользоваться из-за частого переноса строк. Широкое поле допустимо только в WYSIWYG-редакторе.

Неправильно

Правильно

При клике по полю и при переходе табом поле выглядит одинаково: появляется чёрная рамка или рамка в цвет продукта, которая сохраняется до потери фокуса.

Поле с ошибкой подсвечивается красной рамкой.

О поведении полей ввода с ошибками читайте в гайде по валидации.

Скругления, фокусная рамка и валидация такие же как и в поле ввода .