NumberInput

Числовое поле. Поддерживает как ручной ввод, так и увеличение/уменьшение значения, посредством нажатия соответствующих кнопок.

NumberInput​

Примеры​

Контролируемый NumberInput:​

Live Editor
Result
Open in CodeSandbox

Модификация вида числового поля​

Числовое поле может иметь различные отступы внутри, влияющие на форму. Задается с помощью свойства segmentation:

Live Editor
Result
Open in CodeSandbox

Граница числового поля​

Граница числового поля задается с помощью свойства shape:

Live Editor
Result
Open in CodeSandbox

Размер числового поля​

Размер числового поля задается с помощью свойства size:

Live Editor
Result
Open in CodeSandbox

Состояние загрузки числового поля​

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

Live Editor
Result
Open in CodeSandbox

Ручной ввод​

Режим ручного ввода включается свойством isManualInput:

Live Editor
Result
Open in CodeSandbox

Кастомные иконки для кнопок​

Можно установить собственную иконку для кнопки используя свойства decrementIcon и incrementIcon соответственно:

Live Editor
Result
Open in CodeSandbox

Кастомные кнопки увеличения/уменьшения значения​

Можно установить собственные кнопки используя свойства customDecrementButton и customIncrementButton. В таком случае нужно определить функции по уменьшению/увелечению значения в поле.

Live Editor
Result
Open in CodeSandbox