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?

States

Interaction

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

<<use Click target to describe the interaction>>

Validations and errors

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

Best practices

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

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