Option Buttons: Design Guidelines
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.
- 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.