NumberInput

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

Live Editor
Result
Open in CodeSandbox

Управление внешним видом​

Внешний вид компонента зависит от свойств view и size:

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 можно задать количество знаков после запятой, до которого округляется значение при вычислении шага и после завершения ручного ввода. По умолчанию — 2:

Live Editor
Result
Open in CodeSandbox

Форматирование значения​

Для форматирования отображаемого значения доступны те же основные параметры, что и у NumberFormat:

  • thousandSeparator и decimalSeparator задают разделители;
  • thousandsGroupStyle задает стиль группировки (thousand, lakh, wan или none);
  • decimalScale ограничивает количество знаков после десятичного разделителя;
  • fixedDecimalScale дополняет дробную часть нулями;
  • allowNegative и allowLeadingZeros управляют допустимым вводом;
  • isAllowed валидирует значения при ручном вводе и изменении кнопками.

precision не заменяет decimalScale: первый параметр отвечает за точность вычислений, а второй — за количество знаков после десятичного разделителя при вводе и отображении.

Live Editor
Result
Open in CodeSandbox

Форматирование применяется только к отображению. value и второй аргумент onChange не содержат разделителя тысяч; при ручном вводе дробная часть в raw-значении отделяется точкой независимо от decimalSeparator.

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

С помощью свойств 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

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