Skip to main content

Components

Radio Button

A radio button allows users to select only one value in a list of two or more options.

banner-Radio Button

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.

radio button guideline
  1. Indicator Selector : Selection control (input) that can be selected or unselected, and pushed into different states
  2. Label : The Label is the text attributed to the Checkbox that provides context
radio button guideline

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.

Alt text

Do

Lesser options are good to place side by side, so use Radio Button when you have less than 5 Option

Alt text

Don't

Avoid nesting radio buttons with other radio buttons or checkboxes make avoid confusion.

Alt text

Do

Use vertical alignment for user selected

Alt text

Don't

Use horizontal alignment for user selected make confused

Alt text

Do

Use radio buttons when only one item can be selected

Alt text

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.