Textarea

Textarea повторяет оболочку Input, поддерживает нативное изменение высоты, autoresize, очистку и счётчик символов.

Статус: stable · в системе с 2026-05 · интерактивность: always (всегда)

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

Многострочный свободный текст: комментарий, описание, обращение.
Длина ответа заранее неизвестна: autoresize растит поле по содержимому, обычное поле пользователь меняет по высоте нативной ручкой.

Не использовать:

Однострочное значение.
Структурированные данные — это набор отдельных полей, не один большой текст.

Альтернативы:

input — однострочный ввод

Конструктор

Меняйте свойства Textarea, сочетайте их и проверяйте результат в одном живом экземпляре.

Комментарий

Базовый

О себе

Комментарий

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Textarea from "$lib/ui/Textarea.svelte";

let note = $state("Value");
let bio = $state("");
let comment = $state("");
</script>

<div style="display: grid; gap: var(--sp-3); width: 100%;">
  <Textarea placeholder={t("Без подписи")} bind:value={note} />
  <Textarea label={t("О себе")} placeholder={t("Несколько фраз")} bind:value={bio} hint={t("Расскажите кратко.")} />
  <Textarea label={t("Комментарий")} bind:value={comment} autoresize hint={t("Растягивается под объём текста.")} />
</div>

Размеры и очистка

Small

Medium

Large

Очищаемое поле

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Textarea from "$lib/ui/Textarea.svelte";

let note = $state("Value");
</script>

<div style="display: grid; gap: var(--sp-3); width: 100%;">
  <Textarea size="s" label="Small" value={t("Короткое поле")} />
  <Textarea size="m" label="Medium" value={t("Базовая высота")} />
  <Textarea size="l" label="Large" value={t("Длинный ответ")} />
  <Textarea label={t("Очищаемое поле")} bind:value={note} clearable />
</div>

Счётчик и ошибка

Описание

0 / 120

Причина возврата

Поле обязательно.

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Textarea from "$lib/ui/Textarea.svelte";

let limited = $state("");
</script>

<div style="display: grid; gap: var(--sp-3); width: 100%;">
  <Textarea label={t("Описание")} bind:value={limited} characterCounter={120} hint={t("До 120 символов.")} />
  <Textarea label={t("Причина возврата")} error={t("Поле обязательно.")} placeholder={t("Опишите проблему")} />
</div>

Макросы и копирование

macros вставляют значение в позицию курсора, copy копирует текст, prepend держит превью над текстом.

Шаблон письма

<!--
  🟢

  Макросы и копирование (эталон: Vue-легаси textarea macroses / copy):
  метки под полем вставляют макрос в позицию курсора, кнопка в углу копирует
  текст.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Textarea from "$lib/ui/Textarea.svelte";

let value = $state(t("Здравствуйте, {name}! Ваш баланс: {balance}."));
const macros = [
	{ label: "{name}", value: "{name}" },
	{ label: "{balance}", value: "{balance}" },
	{ label: "{date}", value: "{date}" },
];
</script>

<div style="width: 480px;">
	<Textarea label={t("Шаблон письма")} bind:value {macros} copy autoresize />
</div>