NumberInput

Быстрый старт​

Live Editor
Result
Open in CodeSandbox

Внешний вид​

Live Editor
Result
Open in CodeSandbox

Форма компонента​

Форма задается с помощью свойств segmentation и shape:

С помощью свойства segmentation можно изменить отступы между кнопками и полем ввода:

Live Editor
Result
Open in CodeSandbox

Ограничения значений​

С помощью свойств min, max и step можно задать допустимый диапазон и шаг изменения:

Live Editor
Result
Open in CodeSandbox

Точность вычислений​

С помощью свойства precision можно задать количество знаков после запятой:

Live Editor
Result
Open in CodeSandbox

Вспомогательный текст​

С помощью свойств textBefore и textAfter можно добавить текст слева и справа от числа:

Live Editor
Result
Open in CodeSandbox

Ручной ввод​

Свойство isManualInput разрешает редактировать значение непосредственно в поле ввода:

Live Editor
Result
Open in CodeSandbox

Клавиатурная навигация​

Компонент поддерживает управление с клавиатуры:

  • Tab — фокус переходит непосредственно на поле ввода. Кнопки увеличения и уменьшения не участвуют в Tab-навигации.
  • ↑ ArrowUp — увеличивает значение на step.
  • ↓ ArrowDown — уменьшает значение на step.

При isManualInput={false} (по умолчанию) изменение значения доступно только стрелками; прямой ввод с клавиатуры заблокирован. При isManualInput={true} стрелки также работают, дополнительно разрешая прямой ввод числа.

Отображение без значения​

Свойство displayWithoutValue управляет тем, что показывается, когда значение не задано:

  • 'input' — отображается весь компонент (по умолчанию);
  • 'increment' — отображается только кнопка увеличения;
  • 'decrement' — отображается только кнопка уменьшения.

Когда отображается только одна кнопка, она доступна для Tab-навигации. После её нажатия фокус автоматически переходит на поле ввода.

Live Editor
Result
Open in CodeSandbox

Поведение при достижении границ​

Свойство limitBehavior управляет поведением кнопок при достижении значений min/max:

  • 'disabled' — кнопка становится неактивной (по умолчанию).
Live Editor
Result
Open in CodeSandbox

Пользовательские кнопки​

Кнопки увеличения и уменьшения можно кастомизировать:

С помощью свойств decrementIcon и incrementIcon можно заменить иконки кнопок:

Live Editor
Result
Open in CodeSandbox

Состояния​

Live Editor
Result
Open in CodeSandbox

Таблица свойств​