Description

Numeric steppers are two-part controls used to increase or decrease a numeric value.

The stepper may also be known as a spinner or spin button.

Open

Usage & Behavior

General Guidelines

Structure

The stepper consists of:

• Number field - shows the current number, which can be directly edited.

• Up and Down buttons - allows the user to increase or decrease the numeric value.

• (Optional) Preceding label - a label to the left of the control detailing the units of the numeric value or describing the purpose of the control.

Default State

A stepper should have the most frequently used value as the default value.

Content

Steppers can only include numeric values.

Internal Logic

• Label - Where relevant, the preceding label should indicate the units of the value.

Open

• Intervals - The interval between each up/down click may vary according to the content type and the task.

  • By default, the interval should be 1 unit per button press.

  • In some cases, other intervals are more appropriate, depending on the task. For example, speed may be in intervals of 10 units per click (e.g. 60 kph - 70 kph - 80 kph).

  • Manually entering a value in the number field which is in between the defined intervals may be valid or invalid.

    • A valid value will be set.

    • An invalid value may be rounded up to the nearest valid value or ignored. (See Validations and Errors below).

• Minimum and maximum values - When the stepper reaches the minimum or maximum value, the up/down buttons will be disabled respectively.

• Long press on up/down buttons - will enable faster continuous increment or decrement.

States

Interaction

• Clicking the up/down buttons will increase or decrease the value by the defined interval:

• When the number field is empty:

  • clicking the up button will populate the field with a value one interval above the minimum.

  • clicking the down button will populate the field with the minimum value.

• While focused on the number field, the up/down keys on the keyboard will increase/decrease the value. The number field will remain focused and the text cursor will remain in place.

• The user may enter a numeric value using the keyboard.

• When the numeric stepper is selected, the user can use the mouse wheel to increase/decrease the value.

• Long press on up/down buttons will enable faster continuous increment or decrement.

• Pressing the Tab key or clicking outside of the control will move the focus away from the stepper and set the defined value (or the last valid value).

Validations and Errors

• When the stepper reaches the minimum or maximum value, the up/down buttons will be disabled respectively.

• Other validations will be provided for invalid syntax, invalid numbers, and missing values. See Field Validation for more info.

Best Practices

Use:

• when the number field has a commonly used value.

• when most users will only make small adjustments (e.g. changing the number of desired items on a web store).

Don’t use:

• when the range of values is large, and the user may select any value within this range.

• for binary values (e.g. 0 and 1).

• for a range of three values or fewer → use Radio Buttons or Toggle Buttons.

General:

• Use meaningful intervals between values (not too small, not too big), so that each increase and decrease is predictable, noticeable, and valuable.

• Show the range of valid values in the label when it is unusual or unexpected, to help the user avoid mistakes.

• Avoid decimals as possible (e.g. 1, 2, 3 not 1.1, 1.2, 1.3).

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

• In the focus state, typing will enter a value

Design

Code