Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I usually tend to wrap my checkboxes and radio button inside their respective labels and was wondering whether this is considered a good UX practice.

Pros/cons ?

One of my main reasons is that it helps with element alignment as we are mainly using only one element for positioning, whilst having checkboxes/radiobutton outside of the label, creates two elements that often go side by side, thus creating a problematic layout where they both must be wrapped inside a parent element to maintain block status with other form elements.

share|improve this question
1  
possible cross site duplicate of: stackoverflow.com/questions/774054/… –  Ciro Santilli Jul 6 at 13:10

5 Answers 5

Wrap the label around the checkbox. This makes it much easier to click the button.

If the label is separate from the control, then there is often a non-clickable gap between them.

<input id="click-me" name="click-me" type="checkbox"/>
<label for="click-me">
    Click me
</label>

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Wrapping the label around the control removes this gap.

<label for="no-click-me">
    <input id="no-click-me" name="no-click-me" type="checkbox"/>
    No, click me
</label>

mockup

download bmml source

share|improve this answer

This may not be the best answer, but I don't think it's intrinsically good or bad. However, one pro of wrapping the form element in a label tag is that you can greatly expand the area of the clickable object via stylesheets.

It's worth noting that, for accessibility purposes, wrapping the element in a label tag isn't always enough. You should always give your elements an ID, and you should always use the for attribute in the label tag. Some screen readers won't link the label to the form element correctly without it.

Other than that, I think you can do it either way.

(I apologize if this answer was more technical in nature - but then, I'm a developer, not a designer.)

share|improve this answer
    
This is the best reason to wrap inputs in labels. Being able to click anywhere in the label to toggle the selection rather than just the box/circle enhances usability of the form element. –  Shaun Feb 22 '13 at 18:23
5  
@Shaun For what it's worth, the tag provides that functionality whether or not it's wrapping the form element. For instance, a user could click on the label next to a checkbox to select it, even if the label didn't wrap the checkbox. –  lunchmeat317 Feb 22 '13 at 18:25
    
True, if the for attribute is used properly. :) –  Shaun Feb 22 '13 at 18:27
    
"Some screen readers won't link the label to the form element correctly without it." <- Do you have a source for this? –  cimmanon Nov 11 '13 at 19:24

4 good reasons to wrap both <input type=radio> and <input type=checkbox> within their <label>.

  1. Usability: Bigger "hit zone" = better.
  2. Styling : You create a context that is easy to isolate in a CSS cascade. input{width:X%;} label>input{width:auto;}
  3. This technique passes W3C validation.
  4. I can't think of a good reason for not doing it.
share|improve this answer
    
The question is not about whether or not label should be used at all, but which style of mark up to use for labels. –  cimmanon Nov 11 '13 at 19:19

Here's the relevant section of the html5 reference:

http://www.w3.org/TR/html-markup/label.html

It says the following:

  • The label element may contain at most one descendant input element, button element, select element, or textarea element.
  • The for attribute of the label element must refer to a form control.

So you can wrap it around a single form element, and if you use the for attribute it has to refer to a form element, but you don't have to use the attribute and you don't have to wrap.

From a structural point of view, I prefer to think of the label as a separate element that is actually just the label. If you need something to contain both of them, I'd prefer to use a container div. That way, you can style labels in a general way without worrying about any form elements contained within them. Of course the basic form elements don't tend to inherit styling so the distinction is largely academic.

share|improve this answer
2  
If you're talking a11y, you must use the for attribute on labels and properly associate them with the related input. See: WCAG 2.0 - Using label elements to associate text labels with form controls. Valid HTML isn't always accessible. –  steveax Feb 22 '13 at 20:11
    
That's true. Wrapping will still allow the user agent to associate the label with the input, but there's less of a guarantee that they will, and you're not following WCAG. –  Peter Feb 22 '13 at 20:27

Wrapping checkbox inside LABEL tag is a good markup, since clicking 'label' will trigger the checkbox click even in IE8.

Otherwise you will need to use JavaScript workaround to fix the same, which is additional code to your website.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.