Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 23 Next »

 Expand for table of Content

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>>

Type
Usage




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

Zeplin link
Screen thumbnail
https://zpl.io/VxP6OWV





LUX design 


  • No labels