The checkbox design pattern

Working on a lot of client sites that all want to capture data and ensure people agree to terms and conditions, the “checkbox floated next to a label” design pattern is something that comes up all the time.

It may be a common pattern and straightforward to implement but as a result, there are many different ways to apply CSS to get the desired result. I’ve seen countless variations on a theme of floats and positioning but here’s the snippet that I use consistently:

/*
<li class="checkbox-container">
	<input type="checkbox" id="checkbox">
	<label for="checkbox"></label>
</li>
*/
.checkbox-container input,
.checkbox-container label {
    display:inline-block;
    vertical-align:top;
}
.checkbox-container input {
    margin-right:0.25em;
}
.checkbox-container label {
    width:90%; /* tweak depending on the overall width of your form */
    cursor:pointer; /* label linked to input via "for" attribute */
}

One of the benefits here is that there is no need to clear any floats. The module is also robust and portable as there are no explicit widths declared.

If you were overly concerned with the label coming first in the source order, you would have to use float:left on the input instead of display:inline-block. This wouldn’t be a big deal - I’m just trying to keep the number of floats to a minimum these days

As inline-block can be a bit flakey in IE (and not working in IE7 at all), you may want to use some star hacks and add *zoom:1 and *display:inline to get IE7 into shape.

If you found this snippet useful, or have anything else to say, shoot me a tweet @guyroutledge.

If you hate email but still want to keep in touch, follow me on Twitter.

Guy Routledge avatar
Currently available hire me