NumberInput

Description

A controlled input component for numbers with validation states.

Installation

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

Usage

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

const Example = () => (
  <NumberInput
    value="2.5"
    onChange={
      (/** event */) => {
        // alert(event.target.value)
      }
    }
  />
);

export default Example;

Properties

| 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 | | aria-invalid | boolean | | | Indicate if the value entered in the input is invalid. | | aria-errormessage | string | | | HTML ID of an element containing an error message related to the input. | | autoComplete | string | | | Used as HTML autocomplete of the input component. property | | placeholder | string | | | Placeholder text for the input | | value | unionPossible 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 | unionPossible 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 | unionPossible 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. |

onChange

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.

Formik

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

NumberInput.toFormValue

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); // -> ''

NumberInput.isEmpty

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

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