Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

...

Usage & Behavior

General Guidelines

...

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

...

  • 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.

...

  • 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.

...