Spin boxes

Use a spin box to allow users to choose an item from an ordered list easily. For example, use spin boxes to allow users to find a number or to change the day of the week.

User goal

Action using the navigation keys

Action using a touch screen

Find an item in the list.

Move a finger vertically on the trackpad.

  • Drag a finger vertically on the screen.
  • Swipe up or down on the screen.

Choose an item from the list.

Click the trackpad.

Lift a finger from the screen.

Move to another spin box.

Move a finger vertically on the trackpad.

Drag a finger vertically on the screen.

This screen shows an example of a spin box.

Best practice: Implementing spin boxes

  • Use spin boxes for a list of sequential items.
  • Use drop-down lists for non-sequential items or items with irregular intervals. For a short list of non-sequential items, you can use a spin box to provide a more interactive experience for users.
  • Avoid using a spin box if several other components appear on the screen.
  • Add spin boxes to dialog boxes instead of screens where possible.
  • When users highlight a spin box, display three to five items vertically.
  • Use an identifiable pattern for the sequence of items (for example, 5, 10, 15) so that users can estimate how much they need to scroll to find the target item.
  • Avoid making users scroll horizontally to view multiple spin boxes. If necessary, separate spin boxes into multiple fields.
Next topic: Tree views

Was this information helpful? Send us your comments.