Spin button

Specialized input that lets user increase or decrease a value within a set range

When to use a spin button

  • Numerical input with known range: users need to enter a number within a specific shorter range (e.g., setting a quantity, choosing a time, or specifying a percentage)
  • Incremental changes: values that are typically adjusted in small, incremental steps
  • Consistent changes: when values need to change in a predictable manner
  • Limited set of values: there are a limited set of acceptable values

 

 

Best practices

Define clear minimum and maximum values

Set appropriate minimum and maximum limits to prevent users from entering invalid values.

 

Set logical step increments

Use increments that make sense for the context. For instance, step increments of 1 for whole numbers, 0.1 for decimal values, or 5 for percentages.

 

Provide a default value

Initialize the spin button with a sensible default value that is likely to be the most common choice.