Forms · Text entry · Stable

Textarea

Многострочное текстовое поле. Поддерживает четыре размера, состояния Error/Success/Warning/Disabled, счётчик символов, ресайз-маркер.

LabelOut — SM / MD / LG / XL

внешний label · нейтральный
Helper text
Helper text
Helper text
Helper text

States

neutral · error · success · warning · disabled · md
Helper text
Helper text
Превышен лимит символов (E-TA-001)
Поле недоступно для роли
Нельзя редактировать
Заполните перед отправкой
Helper text

LabelIn — States

floating label · MD
Default — кликните чтобы увидеть float
Filled
Заполните перед отправкой31/200
Превышен лимит (E-TA-001)
Поле недоступно

LabelIn — LG / XL

покойный кегль плавающего лейбла 18/24 · Figma Field-LabelIn/Label/Text Style
LG — контейнер 16, радиус 16
XL — min-height 120
XL filled — лейбл всплыл, 12/16

With Counter (maxLength=200)

счётчик символов · md
Максимум 200 символов0/200
Достигнут лимит символов. Сократите текст, чтобы отправить. (E-TA-001)128/128

Доступность

WCAG 2.2 AA · APCA · ARIA · Keyboard
ARIA

Разметка

  • role="textbox" + aria-multiline="true" — многострочное поле
  • aria-label / aria-labelledby — связь с label, озвучивается скринридером
  • aria-describedby → helper text или error message
  • Error: aria-invalid="true" — скринридер оповещает об ошибке
  • Required: aria-required="true"; ReadOnly: aria-readonly="true"; Disable: aria-disabled="true"
Клавиатура

Навигация

  • Tab — фокус на TextArea; Shift + Tab — на предыдущий элемент
  • Enter — новая строка внутри поля (не отправляет форму, в отличие от Input)
  • Ctrl / Cmd + A — выделить весь текст; Ctrl / Cmd + Z — undo
  • ← → ↑ ↓ — движение курсора; Home / End — начало/конец строки
  • Escape — снять фокус (содержимое не очищается)
WCAG 2.2 AA · APCA

Контраст и размер

  • Value text: --ds-text-primary — APCA Lc ≥ 75
  • Label / Helper: --ds-text-secondary — Lc ≥ 45–60
  • Error message: --ds-neg-default (#a70000) — Lc ≥ 60
  • Error: рамка 2px — не только цвет (не полагаться только на цвет)
  • Мин. высота на мобайле ≥ 96px; шрифт ≥ 16px (избежать автозума на iOS)
Focus Ring

Фокус

  • Рамка 2px через box-shadow: inset, цвет --ds-stroke-high
  • Толщина border не меняется — сдвига раскладки нет
  • В состоянии ошибки — --ds-neg-border-focus
  • Виден при навигации с клавиатуры (:focus-visible)
  • Внешнего кольца --ds-focus-ring у поля НЕТ. Прежняя редакция называла кольцо и хекс #5679FD с порогом Lc ≥ 60 — ни того, ни другого в коде нет (исправлено 2026-08-27)

Работа с клавиатурой

Tab · Enter · Ctrl/Cmd · ← → ↑ ↓
Клавиша
Действие
Tab
Фокус переходит на TextArea. Визуальный индикатор — рамка самого контрола (box-shadow: inset, цвет --ds-stroke-high), а не внешнее кольцо.
Shift Tab
Фокус переходит на предыдущий элемент.
Enter
Создаёт новую строку внутри TextArea (стандартное поведение textarea). Не отправляет форму — в отличие от Input.
Ctrl/Cmd A
Выделяет весь текст внутри поля. Ctrl / Cmd + Z — отмена последнего действия (undo, нативно).
← → ↑ ↓
Движение курсора внутри строки (← →) и между строками (↑ ↓). Home / End — в начало / конец текущей строки; Ctrl/Cmd + Home / End — в начало / конец всего текста.
Escape
Снимает фокус с TextArea. Не очищает содержимое.

Правила использования

Когда · Чего избегать
Правила

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

  • Многострочный текст — комментарии, описания, сообщения
  • Объёмный ввод с контролем длины через счётчик символов (Max length)
  • Комментарий к транзакции, описание операции в журнале
  • Сопроводительное письмо при подаче документов (resize vertical, без счётчика)
  • Причина отклонения заявки в B2B ЛК (Label Out, error, required)
  • Формулируйте label кратко (существительное, до 3 слов, без точки)
Чего избегать

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

  • Однострочный ввод (имя, email, сумма) — используйте Input
  • Label In на размере SM — не хватает высоты поля
  • Placeholder вместо label в Label Out — подсказка исчезает при вводе
  • Длинные caption — перегружают интерфейс, держите лаконичность
  • Disable без объяснения причины — добавьте helper text
  • Технический жаргон в ошибках — пишите понятно для конечного пользователя
Однострочный ввод → Input
Если поле рассчитано на одну строку, многострочный textarea избыточен — переключитесь на Input.

State Explorer

Интерактивный тест состояний

Label orientation = Left

gap-x 10/12/12/16 · лейбл прижат к полю (Figma primary MAX)
Лейбл в колонке слева, caption под полем
Top для сравнения — лейбл над полем