View source for Development:Radio button

[[Development: Moodle User Interface Guidelines|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.

== Examples and implementation ==


== Related guidelines ==

* [[Development:Checkbox|Checkbox]]
* [[Development:Switch Button|Switch Button]]
* Sometimes extra options should be hidden with [[Development:Progressive Disclosure|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 [[User:Frank_Ralf/Moodle_forms1]]

== Further information / Sources  ==
* [http://moodle.org/mod/forum/discuss.php?d=126481 Alternatives to yes/no dropdown menus?]
* [http://library.gnome.org/devel/hig-book/stable/controls-radio-buttons.html.en GNOME HIG: Radio Buttons]

[[Category:Moodle User Interface Guidelines]]