A controlled input component for numbers with validation states.

Usage no npm install needed!

<script type="module">
  import commercetoolsUikitNumberInput from 'https://cdn.skypack.dev/@commercetools-uikit/number-input';




A controlled input component for numbers with validation states.


yarn add @commercetools-uikit/number-input
npm --save install @commercetools-uikit/number-input

Additionally install the peer dependencies (if not present)

yarn add react
npm --save install react


import NumberInput from '@commercetools-uikit/number-input';

const Example = () => (
      (/** event */) => {
        // alert(event.target.value)

export default Example;


Props Type Required Default Description
id string Used as HTML id property. An id is auto-generated when it is not specified.
name string Used as HTML name of the input component. property
autoComplete string Used as HTML autocomplete of the input component. property
placeholder string Placeholder text for the input
value union
Possible values:
string , number
Value of the input component.
min number Value is used as min property on input field
max number Value is used as max property on input field
step union
Possible values:
number , 'any'
Value is used as step property on input field
Use the value any for inputs which accept an unpredictable amount of decimals.
onChange ChangeEventHandler Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
onBlur FocusEventHandler Called when input is blurred
onFocus FocusEventHandler Called when input is focused
isAutofocussed boolean Focus the input on initial render
isDisabled boolean Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
isReadOnly boolean Indicates that the field is displaying read-only content
hasError boolean Indicates that input has errors
hasWarning boolean Control to indicate on the input if there are selected values that are potentially invalid
horizontalConstraint union
Possible values:
, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'
'scale' Horizontal size limit of the input fields.


The onChange function is forwarded to <input type="number" /> as-is. So the default behavior of a number-input applies:

The onChange function will be called with an event whose event.target.value holds an empty string in case the entered value can not be parsed as a number. Otherwise, onChange will be called with an event whose event.target.value is a string holding the provided number.


If you pass <NumberInput name="foo" onChange={formik.handleChange} /> then Formik will detect that the event stems from a numeric input and convert the value to a number before storing it in formik.values.foo. Formik will store an empty string in case the entered value is not a number. So the only types you have to handle are either an empty string or a valid number. Input like 10e2 will be converted to 1000 on formik.values.foo. This means that you can just use a number as the initial value of NumberInput as well, no need to convert the number to a string! However, you should still convert undefined to an empty string in cases where the inital value might be undefined. You can use NumberInput.toFormValue() for this.

If you use <NumberInput name="foo" onChange={event => formik.setFieldValue('foo', event.target.value)} /> then Formik will not know that it is supposed to convert the value to a number, so a string will be stored on formik.values.foo. The string will be empty in case the input can not be parsed to a number, or it will be a string holding the valid number. Input like 10e2 will be be kept as "10e2" on formik.values.foo.

Static methods


Converts a number, or undefined value to a value the input can work with. It replaces non-numbers with an empty string to make sure the underlying input component never turns into an uncontrolled state.

NumberInput.toFormValue(3); // -> 3
NumberInput.toFormValue('3'); // -> '3'
NumberInput.toFormValue(); // -> ''
NumberInput.toFormValue(undefined); // -> ''


Returns true when NumberInput value passed to the function is empty.

NumberInput.isEmpty(); // -> true
NumberInput.isEmpty(undefined); // -> true
NumberInput.isEmpty(NaN); // -> true
NumberInput.isEmpty(2); // -> false
NumberInput.isEmpty('2'); // -> false


NumberInput.hasFractionDigits(); // -> throws
NumberInput.hasFractionDigits(2.2); // -> true
NumberInput.hasFractionDigits('2.2'); // -> true
NumberInput.hasFractionDigits('2'); // -> false
NumberInput.hasFractionDigits(2); // -> false