@commercetools-uikit/number-input v19.2.0
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 | 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 <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
4 days ago
3 days ago
3 days ago
4 days ago
7 days ago
7 days ago
7 days ago
7 days ago
7 days ago
10 days ago
11 days ago
12 days ago
12 days ago
11 days ago
13 days ago
14 days ago
19 days ago
19 days ago
19 days ago
20 days ago
20 days ago
21 days ago
21 days ago
24 days ago
25 days ago
27 days ago
28 days ago
28 days ago
28 days ago
28 days ago
28 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
9 months ago
9 months ago
9 months ago
10 months ago
8 months ago
7 months ago
10 months ago
9 months ago
9 months ago
6 months ago
6 months ago
6 months ago
9 months ago
10 months ago
7 months ago
9 months ago
6 months ago
8 months ago
7 months ago
7 months ago
8 months ago
7 months ago
9 months ago
8 months ago
6 months ago
6 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
9 months ago
8 months ago
8 months ago
7 months ago
6 months ago
9 months ago
10 months ago
7 months ago
7 months ago
6 months ago
10 months ago
6 months ago
7 months ago
6 months ago
9 months ago
10 months ago
8 months ago
9 months ago
6 months ago
8 months ago
10 months ago
6 months ago
9 months ago
10 months ago
6 months ago
9 months ago
9 months ago
7 months ago
10 months ago
6 months ago
9 months ago
7 months ago
10 months ago
7 months ago
8 months ago
6 months ago
7 months ago
10 months ago
8 months ago
9 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago