Option Buttons: Design Guidelines

Article
01/26/2007

An option button represents a single choice within a limited set of mutually exclusive choices.

List the default option button first. List the other buttons in the set in a logical order (such as most likely to be selected to least, simplest operation to most complex, least risk to most, and so on).
Place the default option button first.
Group option buttons in sets no smaller than two options. It’s recommended that you use no more than five option buttons in a set. Do not exceed seven. If you need to display more than five choices, consider using a different type of control, such as a drop-down list box.
For option button functionality on a toolbar, use the toolbar control's button support.
Do not use the selection of an option button to trigger events (other than setting a particular option or value). Prohibited events include dynamically displaying text or controls when an option button is clicked, because screen-readers cannot detect such events.
When a group of option buttons represent a property that’s already in a mixed state, no button should be clicked. For example, in the following figure, you’re setting the text justification for a document that already has both left- and right-justified text; this is represented by the absence of a dot in any of the option buttons.
When the current selection has a mixed state, no option button is selected.
If the user clicks any option button in a group with mixed-value appearance, that value becomes the setting for the group; the dot appears in that button and all the other buttons in the group remain empty.
Assign access keys to option button labels. You should also support the TAB or arrow keys to allow the user to navigate to and select a button.
If an option button is a superior or subordinate control, follow the Subordination guidelines.
Make option buttons fully mutually exclusive. Option buttons in the same set cannot overlap in functionality. You can use check boxes when mutual exclusion is not total.
Incorrect

Correct
Stack a set of option buttons vertically, not horizontally. Horizontal alignment leaves insufficient space for localization.
Exception: You may lay out option buttons horizontally if their labels do not exceed five characters and if you leave space for the text to expand 30 percent during localization.
Do not move focus from the option button when the user clicks it, as the focus change surprises and disorients the user. For example, do not open a new surface as soon as an option button is selected.
Exception: If the option button has subordinate controls that become active when the button is clicked or cleared, you may move focus to the first of the subordinate controls.

Option Buttons: Design Guidelines

See Also

Concepts

Additional resources