Forms · Text entry · Stable

Textarea

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

LabelOut — SM / MD / LG

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

States

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

LabelIn — States

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

With Counter (maxLength=200)

счётчик символов · md
Максимум 200 символов 0 / 200
Превышен лимит символов (E-TA-001) 200 / 200

Доступность

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

Фокус

  • Outline 2px, цвет --ds-info-800 (#5475F8)
  • Offset 1px — виден на любом фоне
  • В dark mode focus ring — #5679FD (Lc ≥ 60)
  • Виден при навигации с клавиатуры (:focus-visible)
  • В фокусе граница поля = 2px --ds-info-800

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

Tab · Enter · Ctrl/Cmd · ← → ↑ ↓
Клавиша
Действие
Tab
Фокус переходит на TextArea. Визуальный индикатор — фокус-кольцо --ds-info-800.
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

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