Stepper input

Lab component

Also known as

Spin Button, Number Input

StepperInput displays a default numeric value that users can increase or decrease using the controls or by keyboard actions. Users can also manually enter a specific value. This is particularly useful in scenarios where users need to make small adjustments to a value within a defined range.

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

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.
  • The Stepper Input 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 Stepper Input rather than Input with type="number".

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

If you want to control the value of the stepper input, use the value prop. The onChange prop is required when using the controlled approach.

NameTypeDescriptionDefault