Textarea
Багаторядкове поле з опційним автоматичним ростом під вміст.
Автоматичний ріст
Росте до восьми рядків, далі з'являється власна прокрутка.
61 / 280
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
rows | number | 4 | Кількість видимих рядків у згорнутому стані. |
maxRows | number | 12 | Стеля висоти в рядках для `autoresize`. |
modelValue | string | — | Значення поля. Використовуйте через `v-model`. |
name | string | — | — |
maxLength | number | — | Максимальна кількість символів. Передається як нативний `maxlength`. |
error | string | — | Текст помилки. Його наявність вмикає стан помилки. |
hint | string | — | Підказка під полем. Ховається, коли показано помилку. |
label | string | — | — |
placeholder | string | — | — |
id | string | — | Стабільний DOM id. `name` використовується лише для форми. |
inputClass | string | — | Додаткові класи на сам `<textarea>`. Звичайний `class` осідає на кореневому `<div>` разом із лейблом і текстом помилки — це правильно для відступів, але не дає, скажімо, зробити поле моноширинним. Цей проп цілить саме в поле. |
showCount | boolean | false | Показувати лічильник символів. Працює разом із `maxLength`. |
required | boolean | — | — |
disabled | boolean | — | — |
readonly | boolean | — | — |
autoresize | boolean | — | Автоматично росте під вміст замість власної прокрутки. Обмежене `maxRows`: без стелі довгий текст виштовхує кнопку «Надіслати» за межі екрана. |
Події
| Назва | Payload | Опис |
|---|---|---|
update:modelValue | [value: string] | Зміна значення. |
focus | [event: FocusEvent] | Поле отримало фокус. |
blur | [event: FocusEvent] | Поле втратило фокус. |
Доступно через ref
| Назва | Тип | Опис |
|---|---|---|
focus | () => void | Ставить фокус на поле. |
Коли використовувати
Для тексту, довжина якого наперед невідома: опис, коментар, повідомлення.
autoresize доречний там, де поле — головний елемент екрана (поле вводу
чату). У щільній формі фіксована висота передбачуваніша.
Для полів із лімітом задайте maxLength і showCount: браузер не дасть
ввести зайве, а користувач бачитиме лічильник поточна / максимальна.
Коли НЕ використовувати
Не вмикайте autoresize без стелі. Довгий текст виштовхне кнопку
«Надіслати» за межі екрана — типово maxRows дорівнює 12.
Доступність
Висота перераховується у два кроки: спершу скидається в auto, і лише
потім читається scrollHeight. Без скидання поле росло б при видаленні
тексту так само, як при додаванні, бо scrollHeight ніколи не зменшується
сам.
Поле має рівно один активний опис: помилка має пріоритет над підказкою,
підказка — над лічильником. Видима помилка оголошується через role="alert".