Description

ONGOING 

Radio buttons are used when a list of two or more options are mutually exclusive, meaning the user must select only one option. 

<<Types>> 

<<use this section only if the component has several types that each requires its own page e.g. table, collapsable table>>

<<If you are using this section, then Usage & Behaviour should be used only for the Common functionalities in the page>>

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.

Try to avoid

• 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

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

Best practices

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

Accessibility compliance

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

We already set a general guidelines described in Keyboard & Focus Management Guidelines >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see Screen Reader Guidelines >>

Contrast & size compliance

<<Visual designers must comply with the minimal of Contrast + Font Size Guidelines for each component>>

Design

LUX design