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

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

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

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

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

Пользователь вводит символ на последней свободной строке, добавляется ещё одна строка:

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

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

Поле, в котором есть счетчик, ничем не отличается от обычного многострочного поля:

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

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

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

Введено максимальное количество символов

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

Превышено максимальное количество символов

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

Подсказка к счетчику

Помогите пользователю понять для чего введены ограничение — клик по иконке рядом со счетчиком покажет подсказку:

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

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

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

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

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

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

Состояния: