Перейти к содержимому
v2.5.0
English
Русский
Документация

NumberField

NumberField — составной компонент для ввода чисел с необязательными кнопками шага, границами, маской и изменением значения колесом или клавиатурой.
StorybookИсходникиFigma

Подпись

  • Связывайте NumberFieldInput с видимым Label.

Поведение клавиатуры

ОбъявлениеПереведите фокус на демо и нажмите клавишу из таблицы.
КлавишаДействие
↑Увеличивает значение на один step, не выше max. Пустое поле получает min, а без него 0.
↓Уменьшает значение на один step, не ниже min.
Каждая строка проверена в настоящем браузере: Playwright нажимает клавишу в Chromium и смотрит, где оказались фокус и активный элемент.
  • Обычное редактирование текста по-прежнему происходит в нативном input.

Поведение фокуса

  • Фокус находится на input и на кнопках шага, если они есть.
  • Следите, чтобы соседние элементы управления оставались доступными с клавиатуры в разумном порядке.

Семантика для скринридеров

  • Значимый элемент ввода — по-прежнему нативный input.
  • aria-valuemin и aria-valuemax выставляются на input из контекста.

Семантика форм

  • name, required и поведение отправки принадлежат NumberFieldInput.
  • Границы и шаг — поведение продукта, а не замена валидации на бэкенде.

Риски доступности

  • числовое поле без подписи
  • изменения колесом мыши, неожиданные для пользователя, когда фокус на поле
  • неясный смысл соседних кнопок уменьшения и увеличения