Spin Boxes: Design Guidelines

A spin box is a combination of a text box with an up-down control.

If a spin box is a superior or subordinate control, follow the Subordination guidelines.
Right-align numerical values in the text box.
Define the top button to increase the value by one unit and the bottom button to decrease the value by one unit. However, you can specify any increment that is appropriate, such as increments of 5 seconds, 30 minutes, etc.
Provide a label and access key for every spin box—unless the spin box is subordinate to a check box or option button. Position the label to the left of the box.
When the control has the input focus, the user can change the spin-box value by pressing the UP ARROW or DOWN ARROW key. In some cases the user can also type the value directly.

Developer Note:

Arrow Keys: To make the keyboard arrow keys increase or decrease the value in a spin box, you must set the style UDS_ARROWKEYS.
At the end of a range of values, restart the range. The spin-box metaphor is that the user is spinning a wheel of values, hence this wheel-like behavior.

Developer Note:

Wrapping: To make the values in a spin box wrap at the end of a range, you must set the style UDS_WRAP.
If a set number of values comprise the range (such as with the months of the year), do not make the text box editable. You may still allow type-ahead functionality.
A spin box can have multiple points of focus. In the following figure, the up-down control affects the values for hours, minutes, and seconds—whichever has input focus.

See Also