Number input

To avoid misleading users, set the width to correlate to the length of the value you’re expecting. For example, an input for a three-digit value shouldn't be wide enough to accommodate a sentence worth of characters. See forms pattern for more information on layout.

• To adjust a value in small, precise increments or decrements, such as setting the quantity of items, adjusting a numerical setting, or specifying a time duration.
• When the value has a clear minimum and maximum limit, and you want to prevent users from entering values outside this range.
• When the input is purely numerical and does not require complex formatting.
• If a user benefits from adjusting values without having to type them manually, especially on touch interfaces where typing can be cumbersome.
• If there is a requirement to provide immediate visual feedback as the user adjusts the value, helping them understand the impact of their changes in real-time.

• When users need the flexibility to enter any (subjective) value, including those outside a predefined range. Instead, use Input or Multiline input.
• When users need to select a single date or select a date range, between a start and end date. Instead, use Date input.
• When users need to select an item from a large list of options without scrolling. Instead, use Combo box.
• To choose one value from a set of five to ten options that does not require filtering. Instead, use Dropdown.

By default:

• The NumberInput component accepts numeric digits 0-9, decimal point (.), plus sign (+) and minus sign (-).
• Note it does not accept the character e, which is allowed in native HTML type="number" inputs to represent exponential notation. This design choice ensures that all input values remain simple numerical values without exponential formatting.
• For consistent number input interaction in your application, use NumberInput rather than Input with type="number".

Just like native input elements in React, number inputs can be controlled or uncontrolled. By default a number input is uncontrolled. Use the defaultValue prop to control the default value of the number input.

If you want to control the value of the number input:

• Use the value prop to provide the current value.
• Use the onChange prop to update the value as a string
• If using clamp the current value can change upon blur, ensure you update the current value onNumberChange.

The onNumberChange callback is called with either the parsed number, NaN or null if the string is empty, when incremented/decremented or upon blur. The onChange event handler is called, when the user changes the input.

The default parser, parses signed decimal numbers.

A custom parser can parse an entered string value and should return back the parsed number, NaN or null if the string is empty.

To render a custom value such as 25K or partial value 25, return back NaN and the entered value renders as-typed.

The default formatter, supports signed decimal numbers.

A custom formatter can be provided through the format prop.

Formatting does not occur, whilst the input has focus and is being edited.

The pattern callback lets you control which input values are accepted. Provide a function that returns true for valid input and false for invalid input. When the user types, only values that match your pattern are allowed; others are ignored.

By default the accepted characters must match a signed decimal numbers, eg. +23.456

The onNumberChange callback is called with either the parsed number, NaN or null if the string is empty, when incremented/decremented or upon blur. The onChange event handler is called, when the user changes the input value and can be used to create a controlled NumberInput.