Spin Box (Control)

Use a spin box to allow a user to select a value from a familiar sequence of values that has a logical consecutive order, for example, months in a year or days in a month.

Use a spin box only for familiar or naturally understood sequences of values, since the user has no way to see more than the value choice that is currently displayed in a field of the spin box.

Use a spin box with multiple fields when the fields are related and each field is used to choose a value from a familiar natural sequence (such as days, months, and years).

A spin box should consist of a pair of arrow buttons, plus one or more fields, each of which allow a user to choose among one of a mutually exclusive set of values.

Each field in a spin box should be either a text-entry field, a text-display field, or a label, and always takes focus (even when it is a label).

The arrow buttons in a spin box should represent action choices whose actions spin some field in the spin box. The arrow buttons do not take focus.

The pair of arrow buttons in a spin box should be either horizontal (one points left and one points right) or vertical (one points up and one points down).

If a spin box contains multiple fields, make either all of them tab groups or none of them.

If a spin box is a tab group, then allow the user to use tab group navigation to move focus to the field in the spin box that last had focus.

If a spin box guideline requires moving focus to or changing the value of a specified field that cannot be determined (for example, no field in the spin box previously had focus), use the most significant field of the spin box instead.

Allow text entry to be used only as a shortcut for choosing a value, not as the only means of entering a value.

When an explicit focus policy is in use and focus is on the spin box and the user presses the SELECT button on one of the arrow buttons, change the value of the field in the spin box that has focus.

When an explicit focus policy is in use and focus is not in the spin box and the user presses the SELECT button on one of the arrow buttons, change the value of the field in the spin box that last had focus and move focus to it.

When an implicit focus policy is in use and the user presses the SELECT button on one of the arrow buttons in the spin box, change the value of the field in which the user last pressed SELECT.

When the user presses the SELECT button on a left- or upwards-pointing arrow, spin backwards through values in the designated field; on a right- or downwards-pointing arrow, spin forward through the values.

Spinning forward through the legal values of a spin box field works in the following ways:

Allow the arrow buttons in a spin box to autorepreat.

If a spin box uses horizontal arrows and it has focus, allow → and ← to spin forward and backward, respectively, through the field that has focus.

If a spin box uses horizontal arrows and contains a text-entry field, allow the user to enter and delete characters at the end of that field, but do not allow ← and → to move the cursor through the field.

If a spin box uses horizontal arrows, then allow Home and End to spin the field that has focus to its first or last legal value, respectively.

If a spin box uses horizontal arrows and is a tab group or contains multiple fields (all of which are tab groups), then ↑ should have the same effect as ← and ↓ should have the same effect as →.

If a spin box uses horizontal arrows and contains multiple fields (none of which are tab groups), then allow Ctrl ← and Ctrl → to move focus among the fields, wrapping at the edges.

If a spin button has vertical arrows and contains a text field, it is a tab group.

If a spin box uses vertical arrows and contains multiple fields, then either the spin box is a tab group or all of the fields are tab groups.

If a spin box uses vertical arrows, then when focus is in the spin box, allow ↓ and ↑, respectively, to spin forward and backward through the field that has focus.

If a spin box uses vertical arrows, then allow Ctrl Home and Ctrl End to spin the field that has focus to its first or last legal values, respectively.

If a spin box uses vertical arrows, contains multiple fields (none of which are tab groups), and focus is on a field that is a label, allow ← and → to move focus to the next field to the left or right, respectively, wrapping at the ends of the spin box.

If a spin box uses vertical arrows and contains multiple fields (none of which are tab groups), allow Ctrl ← and Ctrl → to move focus to the next field to the left or right, respectively, wrapping at the ends of the spin box.

When a spin box contains multiple fields, allow the values acceptable in one field to depend upon the value of another field, when appropriate. For example, if the month field is April, allow the day field to be limited to the values 1 to 30.

When the user changes the value in one field, causing the value in another field to become illegal, do not change the value in the dependent field either at all or until the user has moved the pointer or focus off of the element used to change the value. For example, if the user pressed an arrow button to change the month from April to May, change the day value from 30 to 31 only after the user moves the pointer away from the arrow buttons.

When the user changes the value of a field via an arrow button or a directional key, wrap between the first and last value acceptable for that field.

When a value wraps forward or backward in one field of a spin box, allow it to change the value in the next most significant field forward or backward. For example, changing the day from 30 to 1 can change the month from April to May.

When horizontal arrows are used, make each of them the height of the fields of the spin box and either place both of them at one side of the spin box or place the left-pointing arrow at the left end and the right-pointing arrow at the right end.

When vertical arrows are used, place the upward-pointing arrow above the downward-pointing arrow, and place them at one end of the spin box.

When no field within the spin box has focus, provide some form of emphasis to indicate which field would change value if the user pressed the SELECT button on one of the arrow buttons. It is acceptable to show this emphasis only when the pointer is within the spin box.