Radio

Taxonomic name: M-RADIO-GROUP

CORE COMPONENT

Archive - Updated 11/09/18. Current version

Molecule

v.4.2.0

In v.4.2.0 the radio option was introduced, rationalle for this change follows:

Problems

  • Research tends to show it's eaiser for users to answer form questions when the options are shown rather than hidden in a dropdown; there is a lower cognitive load to understanding the options available to answer the question and touch a button tends to be quicker on touch devices than selecting from a dropdown
  • There is a growing base of evidence that form completion rates tend to be higher in forms using stylised radio buttons compared to dropdowns
  • With the current segmented control pattern, we can only display up to 5 options before a dropdown needs to be used
  • Option labels tend to be more than 2 words and wrap very easily onto 3 or 4 lines. This makes the control harder to read and answer

Solution

  • The radio button pattern allows up to 8 options delaying need to use a dropdown
  • It can support longer labels with the single column stacked version
  • It continues to support shorter labels with the double column version

Differences between radio buttons and segmented control

  • The segmented control was originally designed to behave as a switch for yes/no/maybe answers. Being used for questions with longer label answers wasn't the original intent. This causes the wrapping issue and difficulties reading the answer
  • The radio buttons shall be used for questions that are not yes/no answers
  • Segemented control is now limited to only 3 options. Recommendation being for yes / no / maybe questions