Forms · Text entry · Stable

InputText

Текстовое поле двух типов: LabelOut — лейбл снаружи поля, и LabelIn — floating label, анимируется вверх при фокусе. Оба поддерживают SM–XL, четыре интента валидации, иконки, clear, disabled и read-only.

States

neutral · md
Helper text
Helper text
Helper text
Нельзя редактировать

Intents

neutral / error / success / warning · md
Helper text
Неверный формат email
Email подтверждён
Адрес не найден в базе

With Icons

leading · trailing · both · required
Обязательное поле

Размеры

SM 32px · MD 40px · LG 48px · XL 56px
Размер
Высота
Шрифт
Padding
Иконка
SM
14px
8px
16px
MD
16px
10px
20px
LG
16px
12px
24px
XL
18px
16px
24px

MaxLength / Counter

maxLength=100 · счётчик символов
Краткое описание операции 0/100
Краткое описание 16/100

iconHelpLabel

иконка ? рядом с лейблом · tooltip-паттерн
10 или 12 цифр
Пример: SABRRUMM или SABRRUMMXXX
% годовых

Prefix / Suffix

текстовые аффиксы · не иконка
+7
Мобильный номер
https://
Адрес сайта без протокола
руб
Сумма в рублях
USD/RUB
Точность до 4 знаков

Clear Button

кнопка очистки · заполненное поле
Начните вводить название или ИНН
Международный номер счёта
Диапазон дат отчётного периода

Тёмная тема

data-theme="dark"
Helper text
Helper text
Helper text
Email подтверждён
Нельзя редактировать

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

Do · Don't
Использовать

Когда применять

  • Свободный ввод текста: имя, email, сумма, IBAN, поиск
  • Одно поле — одно смысловое значение. Не объединяйте в одно поле несколько атрибутов
  • Leading icon — когда иконка передаёт тип поля (поиск, пользователь, телефон)
  • Helper text — всегда объясняйте ограничения формата до ошибки
  • Required (*) — только для полей, без которых нельзя отправить форму
Избегать

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

  • Для выбора из фиксированного списка — используйте Select
  • Для пароля — используйте Input Password (с toggle видимости)
  • Иконка валидации (error/success/warning) отображается в Caption — не внутри поля. Trailing icon — для произвольных иконок-индикаторов
  • Error без helper text — пользователь должен знать что именно исправить
  • Read-only вместо disabled — read-only когда данные можно скопировать; disabled когда поле недоступно

API

Input
Input
Prop
Тип
Default
Описание
size
'sm' | 'md' | 'lg'
'md'
Размер поля. SM — 32px, MD — 40px, LG — 48px. Влияет на высоту, padding, шрифт и иконку.
validation
'none' | 'error' | 'success' | 'warning'
'none'
Семантика валидации. Меняет цвет рамки и caption (текст + иконка circle-x/check/alert).
label
string
—
Подпись над полем. Рендерится как <label>, связан с input через htmlFor.
helperText
string
—
Подсказка под полем. При validation="error" читается screen reader как alert.
leadingIcon
ReactNode
—
Иконка слева внутри поля. Обычно передаёт тип данных (поиск, пользователь).
trailingIcon
ReactNode
—
Иконка справа внутри поля. Отображается только при явной передаче — validation не влияет.
disabled
boolean
false
Блокирует поле. Фон nba-15, рамка nba-border-disabled, текст disabled-text.
readOnly
boolean
false
Поле только для чтения. Фон surface-muted, данные можно скопировать.
required
boolean
false
Обязательное поле. Добавляет * к label и aria-required на input.
placeholder
string
—
Текст-подсказка пока поле пустое. Не заменяет label.
...rest
InputHTMLAttributes
—
Все стандартные атрибуты <input>: type, value, onChange, onBlur, autoComplete, etc.

Доступность

WCAG 2.2 AA · ARIA · Keyboard
ARIA

Разметка

  • <label> связан с <input> через htmlFor / id — нативная семантика
  • При validation="error": aria-invalid="true" на input, helper text имеет role="alert"
  • aria-describedby связывает input с helper text во всех интентах
  • Обязательное поле: aria-required="true" на input
  • Read-only: атрибут readOnly на нативном input — screen reader объявит "только для чтения"
Клавиатура

Навигация

  • Tab — фокус на поле
  • Стандартная навигация по тексту: Home, End, Ctrl+A
  • Tab повторно — переход на следующий контрол формы
  • Read-only: ввод заблокирован, но поле фокусируется и текст можно копировать
Focus ring

Фокусное кольцо

  • Цвет: --ds-info-800 (#5475F8) для neutral, цвет интента для error/success/warning
  • Ширина: 2px offset 1px от рамки поля
  • Паттерн: двойной box-shadow — внутренний белый offset, внешний цветной кольцо
  • Видим во всех браузерах при навигации с клавиатуры
WCAG

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

  • Текст поля: --ds-text-primary — Lc ≥ 60 на фоне surface
  • Placeholder: --ds-text-tertiary — Lc ≥ 30 (не несёт смысловой нагрузки)
  • Label: --ds-text-secondary — Lc ≥ 45
  • Минимальная высота SM (32px) соответствует рекомендации 24px touch target для desktop

Help Button

label · trailing · размеры

Рядом с лейблом

Безрисковая ставка + премия

Справа снаружи поля

State Explorer

Интерактивный тест состояний — переключай и смотри
Вариант

Label Inside

Floating label — label анимируется вверх при фокусе или заполненном поле, освобождая пространство для ввода. Использует отдельные CSS-токены --ds-field-in-*.

SM / MD

--ds-field-in-sm/md-h · --ds-field-in-sm/md-r
MD · пустое поле
MD · заполненное поле
SM · пустое
SM · заполненное

LG / XL

--ds-field-in-lg/xl-h · --ds-field-in-lg/xl-r
LG · пустое поле
LG · заполненное
XL · пустое поле
XL · заполненное

States

default · error · success · warning · disabled
Default
Неверный формат БИК [ERR-1042]
Банк найден: Сбербанк
Уточните реквизиты перед отправкой
Disabled (read-only для роли)

With Counter

счётчик символов справа в caption
Необязательное поле14 / 100
До 210 символов35 / 210

State Explorer — Label Inside

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