NumberInput

The NumberInput component allows the user to enter numerical data. Any other characters will be ignored. NumberInputs are auto-formatted according to locale, while the user types. You can configure the locale of your application via the Configuration component. If you require a user to select a number from a defined range, you should consider using the Slider component instead.

For more information on how to use the features and props for this component, check out the developer documentation.

The NumberInput component can either show or hide decimals while inserting input via the showDecimal prop. If decimals are shown, you can limit the maximum number of decimals to show via the numberOfDecimals prop. You can also disable the default locale supported group separators by passing false to showGroupSeparators. You may also include a unit to display within the input field and position that unit before or after the numerical input via the unitPlacement prop. This property is set to after by default.

The NumberInput component allows for manual entry of numerical values as well as native support of the up and down arrow keys to increase or decrease the current value. The arrow keys will modify the value by multitudes of the provided step, or 1 by default. The component also allows for standard Form field structures such as being set required, disabled, or readOnly, as well as including a label, status, or info.

The NumberInput can also take a stepper variant that behaves identically to the NumberInput except that the input is centered with decremental and incremental actions on either end. These actions mimic the role of the up and down keys.

NameTypeDefaultDescription
aria-labelstringOptional manual override for generated aria label
classNamestringAdditional CSS classes.
disabledbooleanDisable the control. The browser defaults to false.
idstringSets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render.
infoReactNodeIt is recommended to pass a simple string to offer guidance. Text will be styled based on status prop.
labelReactNodePass a string or a fragment with an Icon and string.
labelHiddenbooleanfalse Visually hides the label region.
maxnumberNumber.MAX_SAFE_INTEGER The maximum value to accept for this input. This value must be greater than or equal to the value of the min attribute.
minnumberNumber.MIN_SAFE_INTEGER The minimum value to accept for this input. This value must be less than or equal to the value of the max attribute.
namestringSets html name attribute for the underlying control. Useful for mapping to a data field.
numberOfDecimalsnumbervariable NUMBER_MAX_DECIMAL_PLACES. Recommended minimum: 1. Determines the maximum number of decimal places. The value is simply truncated to the number of places.
onBlur(value: string) => voidCallback fired when the component loses focus.
onChange(value: string) => voidCallback fired when input value changes.
placeholderstringPlaceholder text. The browser defaults to an empty string.
readOnlybooleanMakes the component non editable and non clickable. The browser defaults to false.
refRef<HTMLInputElement>Ref for the wrapping element.
requiredbooleanIndicate if the field is required. The browser defaults to false.
showDecimalbooleantrue Determines whether decimal places should be shown. The value is simply truncated if true.
showGroupSeparatorsbooleantrue Determines whether group separators should be shown.
status
'success' |'warning' |'error' 
Set visual state based on a validation state.
stepnumber1 A stepping interval to use when using up and down arrows to adjust the value.
unitstringDefines unit of the number, like 'kg', 'miles' or '%'.
unitPlacement
'before' |'after' 
"after" Determines the placement of the unit.
valuestringCurrencyInput input value. Requires an onChange handler to update value.
variant'stepper'