Textarea

Textarea принимает текст в несколько строк: описание, сообщение, отзыв. Сама по себе это голая рамка; чтобы у поля были подпись, подсказка и ошибки, оберните его в Field.

Стабильный

Figma

Обзор

Использование

API

Доступность

<tk-field label="Description" helper="A couple of sentences about what makes it special">
  <tk-textarea name="description" rows="4" limit="200"></tk-textarea>
</tk-field>

Анатомия

Часть	Что это
`tk-textarea`	сам элемент; одна остановка Tab
part `textarea`	нативный `<textarea>` с рамкой и уголком для растягивания
счётчик	число символов под полем; появляется, если задан `limit`

Подпись, подсказку и сообщение об ошибке рисует Field. Префикса, суффикса и size нет.

Высота

<tk-textarea aria-label="Short note" rows="2"></tk-textarea>
<tk-textarea aria-label="Cover letter" rows="8"></tk-textarea>

rows задаёт начальную высоту (по умолчанию 5). Подбирайте её под ожидаемый ответ: заметке в два предложения восемь строк не нужны. Ниже двух строк поле не бывает.
Поле можно растянуть за уголок в высоту, но не в ширину. Ширину задаёт ваша вёрстка.
Длинный текст прокручивается внутри поля.

Состояния

<tk-textarea aria-label="Shipping notes" readonly value="Leave at the front desk"></tk-textarea>
<tk-textarea aria-label="Internal notes" disabled value="Locked after review"></tk-textarea>

<tk-field label="Reason for return" required error="Enter a reason for the return">
  <tk-textarea name="reason" rows="3"></tk-textarea>
</tk-field>

Рамка ведёт себя как у Input: при наведении не меняется, а при фокусе окрашивается в цвет фокуса и утолщается внутрь.

readonly: на поле можно перейти, текст можно выделить и скопировать, но не изменить.
disabled: на поле нельзя перейти, его нельзя изменить и растянуть, а в форму оно не попадает. Лучше readonly.
Ошибка: задайте error у Field. Рамка станет красной, а сообщение появится под полем.
Обязательное поле: задайте required у Field. Без Field ставьте его на сам textarea.

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

Ограничение длины

<tk-field label="Bio">
  <tk-textarea name="bio" rows="3" limit="40" value="Product designer in Lisbon. Loves maps, trains, and good coffee."></tk-textarea>
</tk-field>

limit показывает счётчик под полем: сначала «You can enter up to 200 characters», потом «15 characters remaining», а сверх лимита красным — «12 characters too many».
Ввод и вставку счётчик не блокирует. Можно вставить готовый ответ целиком и потом сократить.
Красный счётчик — единственный сигнал. Он не отмечает поле как неверное и не мешает отправить форму. Проверьте длину при отправке и, если текст слишком длинный, задайте error у Field.
Ставьте лимит, только если он настоящий, например ограничение базы данных или юридическое.
maxlength обрезает ввод и вставку на лимите. Для обычного текста берите limit и никогда не задавайте оба сразу.

Когда использовать

Textarea — для свободного текста длиннее одной строки. Короткие или структурные ответы, например имя, телефон или email, — в Input.
Прежде чем увеличивать поле, проверьте сам вопрос. Сложный открытый вопрос часто лучше разбить на несколько простых с вариантами ответа.
Форматирования нет: ни панели инструментов, ни жирного, ни ссылок.

Текст

Правила для подписи, подсказки и ошибки те же, что у Input. И ещё одно:

Пишите подсказку к ответу в helper, а не в плейсхолдер. Большое пустое поле так и просит плейсхолдер, но он пропадает с первым же символом.

Можно / нельзя

✅ Можно	❌ Нельзя
Задавать `rows` под ожидаемый ответ	Давать одну высоту и заметке, и сопроводительному письму
Использовать `limit` для обычного текста	Использовать `maxlength`, который обрезает вставленный текст
Проверять длину при отправке формы	Считать красный счётчик проверкой
Писать подсказку в `helper` у Field	Писать инструкции в плейсхолдер
Разбивать размытый вопрос на простые	Вместо этого увеличивать поле

Field: подпись, подсказка и ошибка вокруг поля.
Input: ввод текста в одну строку.

API

Атрибуты

Атрибут	Тип	По умолчанию	Что делает
`value`	string	`''`	текст; отправляется под именем `name` вместе с переносами строк
`name`	string	—	имя поля в форме
`rows`	number	`5`	начальная высота в строках; не меньше 2
`limit`	number	—	показывает счётчик символов; ввод не блокирует
`maxlength`	number	—	браузер обрезает текст сверх этой длины; не сочетайте с `limit`
`placeholder`	string	—	подсказка внутри пустого поля; лучше без неё
`autocomplete`	string	—	назначение для автозаполнения; ставьте на личные данные
`inputmode`	string	—	экранная клавиатура
`required`	boolean	`false`	браузер не отправит форму с пустым полем; видимой отметки нет
`readonly`	boolean	`false`	можно перейти и скопировать, нельзя изменить
`disabled`	boolean	`false`	не в фокусе, не редактируется, не попадает в форму

События

Своих событий нет. Слушайте input на каждое нажатие клавиши и change, когда значение подтверждено; текущее значение — в свойстве value. Сброс формы возвращает первоначальное значение и не вызывает change.

Методы

focus(): переводит фокус в поле.

CSS

::part(textarea): нативный <textarea>.

Токены

Во всех состояниях рамка использует токены Input. Отступы — space-8 сверху и снизу и space-10 по бокам, углы — radius-8, текст — Body Small (14/20). Счётчик — text/secondary, сверх лимита — text/error. Значения по темам: Color.

Доступность

Встроено:

Нативный <textarea>: до него доходит Tab, работают выделение, автозаполнение и растягивание.
Field вокруг поля называет его, связывает с ним подсказку и ошибку и при ошибке отмечает поле как неверное.
Скринридер читает счётчик, когда человек делает паузу в наборе, а не на каждую клавишу.

На вашей стороне:

Дайте каждому полю имя: подпись в Field или aria-label.
Проверяйте длину сами при отправке формы.

Клавиша	Действие
`Tab`	переводит фокус в поле; пропускает его при `disabled`
`Enter`	переносит строку

Пределы контраста

Пределы те же, что у Input: см. пределы контраста Input.

Анатомия

Высота

Состояния

Ограничение длины

Когда использовать

Текст

Можно / нельзя

Связанные

API

Атрибуты

События

Методы

CSS

Токены

Доступность

Пределы контраста