* Use radio buttons for a few mutually exclusive options. If there are more than five options (or if there is not enough space to arrange four or five options), use a [[Projects/Usability/HIG/Combo_Box| combo box]] or list instead.</td>

!colspan="2" style="text-align: left"|Use radio buttons for a few mutually exclusive options. If there are more than five options (or if there is not enough space to arrange four or five options), use a [[Projects/Usability/HIG/Combo_Box| combo box]] or list instead.

!colspan="2" style="text-align: left"|If there are only two options where one is the negation of the other (e.g. "apply" vs. "do not apply"), consider replacing the radio buttons by one [[Projects/Usability/HIG/Check_Box| check box]].

!colspan="2" style="text-align: left"|Do not use a radio button to initiate an action. Consider using a [[../Buttons|push button]] instead.

|}

|}

−

* If there are only two options where one is the negation of the other (e.g. "apply" vs. "do not apply"), consider replacing the radio buttons by one [[Projects/Usability/HIG/Check_Box| check box]].

−

[[File:RadioButtons-2-bad.png]][[File:RadioButtons-2-good.png]]

−

* Use radio buttons if the user should see the choices without further interaction.

−

[[File:RadioButtons-3-good.png]][[File:RadioButtons-3-bad.png]]

−

* Do not use a radio button to initiate an action. Consider using a [[../Buttons|push button]] instead.

−

[[File:RadioButtons-4-good.png]][[File:RadioButtons-4-bad.png]]

−

−

−

<table tablewidth="20%">

−

<td bgcolor=#FF9999 align="center">[[File:RadioButtons-1-bad.png]]

−

<td bgcolor=#99FF99 align="center">[[File:RadioButtons-1-good.png]]

−

</table>

=== Behavior ===

=== Behavior ===

Revision as of 14:32, 18 July 2013

Purpose

Radio buttons offer the user a choice of two or more mutually exclusive options. Try to limit the number of radio buttons and radio button groups in a dialog. Offering a high number of radio buttons consumes screen space and adds to visual clutter. At the same time, showing all available options at once is an advantage if users are likely not to know possible alternatives.

Examples

Guidelines

Is this the right control

Use radio buttons for a few mutually exclusive options. If there are more than five options (or if there is not enough space to arrange four or five options), use a combo box or list instead.

If there are only two options where one is the negation of the other (e.g. "apply" vs. "do not apply"), consider replacing the radio buttons by one check box.

Use radio buttons if the user should see the choices without further interaction.