Our Radio Buttons have 4 customized states. Hover states follows the browser default. Error state follows the form validation rule.
States in Contest
- Unchecked-disabledUse for items are not available currently, but will become available if use makes some changes. Use if there is benefit to surface this item. i.e. surface cross sale and up sale opportunities
- Radio Buttons are used to surface multiple choices. This control is highly discoverable, but less scaleable. It is ideal to use this control for 5 items or less. If there are more options, consider dropdown selector. When a group of radio buttons is activated (one from the group is selected), enable keyboard interactions. (i.e. arrow up and down)
States in Contest
Why Use This Pattern
Radio Buttons allow a user to select one item from a short to mid-length list of a predefined choices. Often the user needs to select from several mutually exclusive choices, this is an easy treatment and well understood by user to enter a selection.
What is the SolutionA Radio Button represents an exclusive choice within a set of related options. In any set of radio buttons, only one button can be in the selected state at any given time.
- Only one radio button may be selected at a time.
- Each group should have a default selection.
- At least 2, and no more than 7 radio buttons should be included in a group.
Keyboard and Accessibility
Ensure that users can navigate to and modify the radio buttons using only the keyboard. Users can use the tab key to navigate betwen radio buttons and the enter key to select a specific button.
When to Use This Pattern
- The user needs to make a choice between mutually exclusive options.
- The user needs to set attributes or properties.
- It is beneficial to have all options visible.
- All choices are immediately visible.
- Choices with long labels can be seen in their entirety.
- Take up a lot of space.
- Cannot be used when there are a large number of options.
- Cannot be used to select from a large range of values.
Do Not Use This Pattern When
- Space is constrained (use a Drop Down List).
- The user may need to select multiple choices within a group (use Checkboxes)
- The user may need to enter a choice that is not pre-defined (use a Combo Box).
- The user needs to select from a range of values (use a Slider).