Input checkboxes wrapped inside <labels>

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

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

    With the wrapped version, there's no need to link the label to it's associated input with `for` and `id`.

    @Colin'tHart Yes, I think you are right. When I wrote that answer all those years ago, I *think* the `id`/`for` were still required on some browsers even in the nested case.

    **You don't need the** `for="no-click-me"` nor the `id="` if you wrap into `

    @RokoC.Buljan Yes, Colin'tHart already pointed that out. It was necessary 7 years ago but probably not so much today.

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

    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.

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

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

    True, if the for attribute is used properly. :)

    "Some screen readers won't link the label to the form element correctly without it." <- Do you have a source for this?

    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 `` inside the `

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

    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.

    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.

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

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

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

  • Could you add in some of the relevant points?

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM