Components
Radio Button
A radio button allows users to select only one value in a list of two or more options.
Anatomy
Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
- Indicator Selector : Selection control (input) that can be selected or unselected, and pushed into different states
- Label : The Label is the text attributed to the Checkbox that provides context
Usage
Use radio buttons when you want users to see all available options and the list of options is small. For mutually exclusive options, consider a checkbox or switch.
- Radio buttons are best for six or fewer options.
- For more than 6 options, consider a select, which prompts users to disclose the options
Common places radio button appear : form, confirmation, etc.
When to use
- When You Want to Emphasize Options
- When You Have Less Than 5 Options
- When Comparison of Options Needs to Make Clear
- When Visibility and Quick Response Is A Priority
When not to use
- When Default Option Is The Recommended Option
- When A Large Number of Familiar Options Are Available
- When You Have More Than 7 Options
Accessibility
Radio buttons are an essential element of forms. They are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. Clicking a non-selected radio button will deselect whatever other button was previously selected in the list.
Radio buttons are great when used correctly they simplify the task of selecting an option. In this article, we’ll overview practical guidelines for radio buttons that have been crafted from usability testing.
Do
Lesser options are good to place side by side, so use Radio Button when you have less than 5 Option
Don't
Avoid nesting radio buttons with other radio buttons or checkboxes make avoid confusion.
Do
Use vertical alignment for user selected
Don't
Use horizontal alignment for user selected make confused
Do
Use radio buttons when only one item can be selected
Don't
Don't use checkboxes when only one item can be selected
Content
When creating Radio Button :
- Make sure that the purpose and current state of a set of radio buttons is explicit.
- Limit the radio button’s text label to a single line.
- If the text label is dynamic, consider how the button will automatically resize and what will happen to any visuals around it.
- Use the default font unless your brand guidelines tell you otherwise.
- Don’t put two RadioButtons groups side by side. When two RadioButtons groups are right next to each other, it can be difficult for users to determine which buttons belong to which group.