...

Usage & Behaviour

Use radio buttons to:

• Select a single option from a list
• Expose all available options

General guidelines

• List options in a logical order:
  • Most likely to least likely to be selected.
  • Simplest to most complex operation.
  • Least to most risk.
• Make one radio button option the default. Select the safest, most secure, and private options first. If safety and security aren’t factors, select the most likely or convenient option.
• If you need to have an unselected state, add a radio button with a None option.
• If you can't have a comprehensive list of all possible options, add an Other option.
• Labels should be concise and provide context.

...

• Putting things in alphabetical order because it is language dependent and not localizable.
• Overlapping choices. e.g. Select age: 0-20, 20-40 - What do you pick if your age is 20?Forgetting to include choices. e.g. Select age: Below 20, Above 20 - What do you pick if you are exactly 20?
• You need to offer the user the option of multiple selection. In this case, use checkboxes instead because radio buttons are for single-selection contexts only.
• The default option is recommended for most users in most situations. In this case, consider a dropdown list instead, which uses less space by not showing all options straightaway.
• You need to present more than 8 options. Use a dropdown menu.
• In special cases, there are only two mutually exclusive options. Combine them into a single checkbox or toggle switch. For example, use a checkbox for “I agree” (for example, to terms and conditions) instead of two radio buttons for “I agree” and “I don’t agree”.
• The options are numbers with fixed steps. Use a slider.

States

Interaction

<<for example, how to change a value – type, arrows, use slider>>

...

The user clicks a radio button to activate the related option. Clicking an activated option does not deactivate it, but clicking a different option transfers activation to that option.

A user can select only one option from a group of radio buttons.

A group of radio buttons behaves like a single control: Only the selected choice is accessible using the tab key, but users can cycle through the group using the arrow keys.

Validations and errors

<<used for specific components e.g. slider>>

...

<<e.g. Slider should display a .label its on>>

Accessibility compliance

<<In general each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>A group of radio buttons behaves like a single control: Only the selected choice is accessible using the tab key, but users can cycle through the group using the arrow keys.

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

...