32

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.

41

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

  • Even more infuriating than a gap are the installers that make it deliberately difficult to click a checkbox that opts out of optional downloads. – Prinsig Jul 17 '15 at 16:23
8

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.
  • 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
  • Some minor reasons against doing it: 1. The input inherits the default styling for labels, most notably font-weight: bold, so you usually have to override that. 2. The input appears inside the label, but semantically it is not a label. (If anything, the label should belong to the input!) 3. If you are arranging labels and inputs using a grid layout, then you cannot nest them like this, so don't get too attached to it. – joeytwiddle Sep 25 '18 at 10:30
  • Reason for using it: You can skip specifying for and id attributes. (Although as noted elsewhere, that is not considered good practice due to older accessibility devices.) – joeytwiddle Sep 25 '18 at 10:31
4

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.)

  • 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
  • I'm afraid I don't have a direct source for problematic devices. But the developer of the popular eslint-config-airbnb package has repeatedly asserted that for the broadest compatibility, you should use for and id attributes and also nest the <input> inside the <label> – joeytwiddle Sep 25 '18 at 10:40
3

Here's the relevant section of the html5 reference:

https://html.spec.whatwg.org/multipage/forms.html#the-label-element

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.

  • 5
    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
  • 1
    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
2

One reason not to wrap a label around an input is because an input field is not a label. Semantically, I don't think it makes sense to put an input inside a label. It wasn't intended to be used in that way.

1

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.

1

The only issue I can see arising when wrapping an input within a label is styling the label when the input state is true (checked). Typically this can be easily accomplished with CSS input:checked + label - when the input nested you'll need to use Javascript to style the label which seems pointless to me.

The example here (https://www.piccolino.com/collections/gliders) shows color swatches in the filter menu which displays a background image, hover state, and active state using the label - while the input is hidden and merely used to capture model data.

Also, see Bootstrap for some good examples of how to avoid the cross browser, click and other issues pointed out in the statements above.

0

Check this video for implicit labels on screenreaders: https://youtu.be/F02AWoK9dXo on article http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

  • Could you add in some of the relevant points? – Mayo Feb 14 at 13:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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