Development:Radio button

Moodle User Interface Guidelines > Radio button

Problem

There are multiple choices, of which the user can only select one.

Context

You are designing a form.

Forces: factors that affect selection

• Radio buttons and dropdown menus are too verbose for a binary choice: use check boxes instead.
• Dropdown menus hide the other choice
• Some times there is no room for a set of radio buttons

Solution

Create a set of radio buttons, each with an id attribute. Add a label for each radio button after the radio button (in left-to-right languages, on the right of the radio button). As the text content of the label element, write the result of selecting the radio button in question:

Show me the
  () Money
  () Way to happiness
  () Glimmering light of an LCD screen

Moodle forms have a left column for the descriptions of the elements in forms, and a right column for the element itself. Radio buttons should have a easy-to-scan short caption on the left column, so that items are easy to find.

Display of desired things   Show me the:
                            () Money
                            () Way to happiness
                            () Glimmering light of an LCD screen

Determine a reasonable default for the value of the set of radio buttons. The reasonable default should be such that if a user does not notice the option, they probably do not mind leaving it to default. If no reasonable default can be determined, you can make the set of radio buttons a required field and have none of the radio buttons selected by default.

A special case: Sometimes you may want users to be capable of selecting multiple items in a set, but limit the number of items (a kind of a mix between radio buttons and checkboxes). HTML does not support this limitation directly, but you can use checkboxes and then script it either in Javascript or server side, in PHP.

Common mistakes

Do not express the option label as a question: "Do you want to see the money?"

Do not invert the option to negative voice: "Don't show me the money". Most times, only positive voice should be used.

Do not use radio buttons or dropdowns when there are only two choices.

Related guidelines

• Checkbox
• Switch Button
• Sometimes extra options should be hidden with Progressive disclosure

Related issues in the tracker

• MDL-19659 - Usability test: Proper display of configuration variables' default values; related: http://moodle.org/mod/forum/discuss.php?d=124533
  • TODO: turn dropdowns into checkboxes and radio buttons in most of Moodle (http://moodle.org/mod/forum/discuss.php?d=126481 )
  • TODO: See Frank Ralf/Moodle forms1

Further information / Sources

• Alternatives to yes/no dropdown menus?
• GNOME HIG: Radio Buttons