Design Guidelines: Radio Buttons versus Checkboxes
Design guidelines for checkboxes versus Radio buttons
Users hate formulars, it is work to them. Filling out forms on the web is no different, that’s why getting web form design right is difficult, even simple forms can be challenging.
A good start is using the correct form element, or in the words of this blog entry to know when to use Radio Buttons versus Checkboxes:
General Design Guidelines
- Use standard visual representations
- Visually present groups of choices as groups (e.g. use subheads)
- Lay out your lists vertically with one choice per line
- Use positive and active wording for checkbox labels
- If possible, use radio buttons rather than drop-down menus
- Always offer a default selection for radio button lists
- Make radio button options comprehensive and clearly distinct
- Associate each button/box with a label
- Define accesskeys for frequently used checkboxes and radio buttons
- Use checkboxes and radio buttons only to change settings, not as action buttons
Radio Buttons
Radio Buttons are used when a list of two or more options is mutually exclusive and the user must select exactly one choice.
<fieldset>
<legend>Gender</legend><br />
<input id="female" type="radio" name="sex" value="female" checked>
<label for="female">Female</label><br />
<input id="male" type="radio" name="sex" value="male">
<label for="male">Male</label><br />
</fieldset>
Checkboxes
Checkboxes are used when a list of options exists where the user may select any number of choices – including zero, one or several.
<fieldset>
<legend>What is your favorite type of salad dressing?</legend><br />
<input id="French" type="checkbox" name="dressing1" value="checkbox">
<label for="French">French</label><br />
<input id="Italian" type="checkbox" name="dressing2" value="checkbox">
<label for="Italian">Italian</label><br />
<input id="Russian" type="checkbox" name="checkbox3" value="checkbox">
<label for="Russian">Blue cheese</label>
</fieldset>
Opt-in Checkbox
A stand-alone checkbox is used for a single option that the user can turn on and off.
<input id="accept" type="checkbox" name="yes" value="checkbox">
<label for="accept">I accept the terms and conditions.</label><br />
References
- Nielsen, J.; Checkboxes vs. Radio Buttons; http://www.useit.com/alertbox/20040927.html
Similar Posts:
Either the author forgot to credit Jakob Nielsen, or is a blantant plagiarist. I’d rather assume the former…
http://www.mgitsolutions.com/blog/2009/02/design-guidelines-radio-buttons-versus-checkboxes/
Oops — wrong link, sorry:
http://www.useit.com/alertbox/20040927.html
Hey Dave, thanks for posting the link to Jacob Nielsen’s article, I added the formal reference to the blog post as well (as I usually do).
wbolbmxrcifw
There is a one main different between radio button and check box. The user can select exactly only one task is radio button and the user can select one or more tasks is called check box. It is used to design the forms, and it is used in designing the websites. It is used mostly in html. Thanks for this post.