Textarea

Багаторядкове поле з опційним автоматичним ростом під вміст.

Автоматичний ріст

Опис

Росте до восьми рядків, далі з'являється власна прокрутка.

61 / 280

sm — швидкий пошук чи коментар, md — типовий, lg — головне поле сторінки. На мобільному текст 16px — iOS Safari не зумує сторінку при фокусі, а висота росте з контентом (min-h), повертаючись до щільних паддінгів на md:.

Опис (md)

Текст листа (lg)

API

Props

Назва	Тип	Типово	Опис
`size`	smmdlg	`"md"`	Щільність поля: `sm` — пошук/коментар, `md` — типовий, `lg` — головне поле сторінки. Висота задана мінімальною (поле росте рядками); на мобільному текст 16px — без авто-зуму iOS.
`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".

Атрибути, що не є props (aria-label, spellcheck, data-*), ідуть на сам <textarea>; class і style — на обгортку разом із лейблом. Текст на телефоні — 16px у пікселях: корінь документа 15px, і text-base (1rem) давав 15px, на яких iOS зумує сторінку при фокусі.