Radio Button Guidelines

posted September 29th 2004 at 2308 EDT in All, HTML

Jakob Nielsen does a good job outlining guidelines for using checkboxes and radio buttons. However there is one item which I would put slightly different, and two which I would give some code examples for.

Spacing

6.Lay out your lists vertically, with one choice per line. If you must use a horizontal layout with multiple options per line, make sure to space the buttons and labels so that it’s abundantly clear which choice goes with which label.

(emphasis mine) Here is a css rule which will add space before the radio button.

<style>
.padd_radio {padding-left:10px;}
</style>

To Default…. or Not

In one of the guidelines dealing with radio buttions Jakob makes the point :

9.Always offer a default selection for radio button lists. By definition, radio buttons always have exactly one option selected, and you therefore shouldn’t display them without a default selection. (Checkboxes, in contrast, often default to having none of the options selected.)

While I agree this is good in general as they should not be selected, there is a caviat when it comes to web applications. There are times that you have mutually exclusive choices but you want to force the user to make one of the choices. In such cases you can not tell if the user has actually performed a choice if you use a default value. Rather, through javascript you can verify if a selection has been made on the radio buttons, and give specifc feedback to request a selection be made when the form is submitted. This would be the only case where it is good not to have a default selection on a radio button group.

Easier Target

He makes a good point about making targets as easy as possible :

11.Let users select an option by clicking on either the button/box itself or its label: a bigger target is faster to click according to Fitts’s Law. In HTML forms, you can easily achieve this by coding each label with

Here is a combination of CSS and Javascript which will do just that. You can wrap the span block around just the radio button, or use it in place of a label tag to make the text part of the target. The background color is just for illustration

Button 1 Button Two

Now the code : first some styling to make the target bigger, and change the pointer to indicate it is clickable.

<style>
.radio_b{
    padding:1px 5px 1px 5px;
    background-color:#d0d0d0;
    cursor: default;
}
</style>

A javascript function which will actually toggle the radio button.

<script language="javascript">
function changeRadio(el){
    el.checked = el.checked ? false : true;
    return true;
};
</script>

The form which contains the target area wrapped in a span tag invoking the power of css and javascript.

<form name="testform">
    <span onClick="changeRadio(document.testform.box1[0]);" class="radio_b">
        <input type="radio" name="box1" class="radio_b">
    </span>Button 1 
    <span onClick="changeRadio(document.testform.box1[1]);" class="radio_b">
        <input type="radio" name="box1" class="radio_b">Button Two
    </span>
</form>

12 Responses

  1. #1 Jaime
    4 years, 3 months ago

    your radio button solution is good but has one flaw. If you try to actually click the radio button rather than the label next to it it will not check in Firebird 1.5. I didn’t check other browsers.

  2. #2 Jimmi
    4 years ago

    test

  3. #3 Jimmi
    4 years ago

    testtest

  4. #4 test
    4 years ago

    alert( ‘test’ );

  5. #5 Steve
    3 years, 7 months ago

    uhm….
    < label >?

    no need for JS… just put…

    Choose A!

    The key is the ID / FOR… as long as they match, clicking the label will toggle the radio button (ditto for checkboxes)

  6. #6 André
    3 years, 5 months ago

    You have to deal with event bubling to make it work when clicking on the actual button..

  7. #7 lequebecois
    3 years, 1 month ago

    Since this page hit pretty high in Google, I wanted to make sure that Steve’s comment was understood by any wandering newby webdev: The solution on this page makes no sense since HTML 4.0 was published 10 years ago (1997) and includes the tag which implements this functionality.

    I think this is simple, and easy HTML documentation:
    http://www.w3schools.com/tags/tag_label.asp

    Happy coding.

  8. #8 mark
    2 years, 8 months ago

    only works if you want to make text clickable, it doesn’t work for general html elements. What I wanted was to make cells in a table trigger the radio buttons they contained, to make clicking them easier.

    In your JS:

    function changeradio(id){
    radio = document.getElementById(id);
    radio.checked = true;
    return true;
    }

    In your HTML:

  9. #9 mark
    2 years, 8 months ago

    sorry, HTML:

  10. #10 efortis
    1 year, 4 months ago

    Sometimes radio buttons need to be initially unselected, OK.
    Enabling the user to unselect them? I strongly disagree.
    Here’s my solution for disabling users to unselect radio buttons:

    First the radio Input should be outside the span.
    Since the original solution passes an element from the radiobutton array,
    I recommend to add a value identical to the index in the array.


    Button 1

    function changeRadio(el){
    var i=0, qtyRadio=3;
    var canCheck = true;

    for (i; i<qtyRadio; i++)
    if(i==el.value && document.frmTutorial.selNivel[i].checked == true) canCheck=false; 

if(canCheck) el.checked = true;

    return true;
    }

  11. #11 efortis
    1 year, 4 months ago

    Oops I don’t know what I was thinking. I overcomplicated the solution. Just remove the conditional for toggle in.

    function changeRadio(el) {
    el.checked = true;
    return true;
    }

  12. #12 Web Design Company
    5 months ago

    Radio boxes not working in firefox..