# NumberInput ## Description A controlled input component for numbers with validation states. ## Installation ``` pnpm add @commercetools-uikit/number-input ``` ``` npm --save install @commercetools-uikit/number-input ``` Additionally install the peer dependencies (if not present) ``` pnpm add react ``` ``` npm --save install react ``` ## Usage ```jsx import NumberInput from '@commercetools-uikit/number-input'; const Example = () => ( { // 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` | `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. | ## `onChange` The `onChange` function is forwarded to `` 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 `` 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 ` 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. ```js 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. ```js NumberInput.isEmpty(); // -> true NumberInput.isEmpty(undefined); // -> true NumberInput.isEmpty(NaN); // -> true NumberInput.isEmpty(2); // -> false NumberInput.isEmpty('2'); // -> false ``` ### `NumberInput.hasFractionDigits` ```js NumberInput.hasFractionDigits(); // -> throws NumberInput.hasFractionDigits(2.2); // -> true NumberInput.hasFractionDigits('2.2'); // -> true NumberInput.hasFractionDigits('2'); // -> false NumberInput.hasFractionDigits(2); // -> false ```