82

Take, for example, these two scenarios. Both very similar HTML, but different semantically:

Scenario 1:

<label for="myCheckbox">
    <input type="checkbox" id="myCheckbox" />
    My Checkbox
</label>

Scenario 2:

<input type="checkbox" id="myCheckbox" />
<label for="myCheckbox">My Checkbox</label>

Both of these would appear to produce the exact same thing. However, they don't. The difference is the implicit space in between the checkbox and the label. In the first scenario, this space would also activate the checkbox because it is part of thee label. However, the second scenario would not because it's outside the label. These creates a small amount of space where, if the user clicked, it would not activate the checkbox as expected.

My CheckboxMy CheckboxMy Checkbox

Depending on how set up the checkbox, there could be an even wider amount of space there. Such as if you floated the checkbox to the left and put a margin of 10, 15, or 20 pixels to the right.

Normally when I think of the UX, I try to make the entire related block all clickable for the same thing. To me, the left side of the checkbox all the way to the right side of its label should be part of one solid block which activate the control.

Should the space in between the checkbox and its label text also activate it? What are some (if any) circumstances in which you wouldn't want to do this?

10
  • Yes, you could help the user further by making the white space clickable. – Like JcolBrand above I recommend a CSS solution to remedy this. Jul 12, 2012 at 21:03
  • 7
    The for attribute on the label is unnecessary when the checkbox it pertains to is inside the label. Jul 13, 2012 at 4:52
  • 1
    Interesting note: Stack Exchange actually uses scenario 2 for their "show removed posts" checkbox in the reputation history.
    – animuson
    Jul 13, 2012 at 7:52
  • Let me phrase it this way: if I am filling out a questionnaire online and the space is not clickable, I curse the developer under my breath and close the questionnaire immediately. Jul 13, 2012 at 8:51
  • 2
    What's argument for not making it clickable?
    – user541686
    Jul 15, 2012 at 8:32

6 Answers 6

78

I believe it should as the entire region in the eyes of the user is the "selection". Now, I think you can look at this issue from another angle which is...how do we remove the perception of a space?

One solution is to include a background surrounding the checkbox and label region. On hover over, the background could change color as well to further reinforce that this whole area is select-able. enter image description here

4
  • 2
    This is the best solution so far, it is an elegant design, and I would add that the color difference should be much more of a contrast.
    – user8394
    Jul 13, 2012 at 1:01
  • 3
    This is nice solution as it clearly denotes the boundaries of the clickable area. In fact, it starts to look like a simple button (with a checkbox within). Jul 13, 2012 at 5:11
  • 1
    While I wouldn't like it highlighted on every checkbox, I would expect entire rectangle around label, no matter what spaces or letter sizes there are to be clickable. Jul 13, 2012 at 10:51
  • @OlegV.Volkov - thats the correct assumption. In fact, the UX could be improved even more by overriding the checkbox with a better visual style. Now were shifting the focus of the interaction from a checkbox to the actual label.
    – Tom R
    Jul 13, 2012 at 16:47
9

I agree with your sentiment that the entire area from left of the checkbox to the right of the label should be clickable as this allows for less click-misses and helps on touch devices.

The mouse icon should also visually indicate this over the whole clickable area.

6

According to http://www.w3.org/wiki/HTML/Elements/label your first scenario is improper, and should be listed as:

<!-- SCENARIO 1 -->
<label>
    <input type="checkbox" id="myCheckbox" />
    My Checkbox
</label>

Now, on to the other part, how should the implicit space be handled?

<!-- SCENARIO 2 -->
<input type="checkbox" id="myCheckbox" />
<label for="myCheckbox">My Checkbox</label>

vs

<!-- SCENARIO 1 -->
<label>
    <input type="checkbox" id="myCheckbox" />
    My Checkbox
</label>

I'm going to re-break these down, with some formatting remarks

<!-- SCENARIO 2 -->
<input type="checkbox" id="myCheckbox" /><!-- implicit HTML space exists here, is outside "label" -->
<label for="myCheckbox">My Checkbox</label>

vs

<!-- SCENARIO 1 -->
<label>
    <input type="checkbox" id="myCheckbox" /><!-- implicit HTML space exists here, is inside "label" -->
    My Checkbox
</label>

Should the space in between the checkbox and its label text also activate it?

Scenario 2 should have a non-clickable whitespace between the checkbox and the label, because the implicit HTML space is between the two elements.

Scenario 1 should have a clickable whitespace between the checkbox and the label because there is an implicit HTML space adjacent to the textnode and the input element.

What are some (if any) circumstances in which you wouldn't want to do this?

I honestly can't think of any such circumstance. I personally want an entire region around my checkbox to select the checkbox. See the answer from Tom R.


If you want to prevent this in the future, use this form:

<!-- SCENARIO 2 -->
<input type="checkbox" id="myCheckbox" /><label for="myCheckbox">My Checkbox</label>
<!-- non-implicit HTML space here, since the elements directly abut -->

However, you probably have some padding on your form elements to begin with, so they will have space around them. This then becomes a CSS issue.

4
  • alternatively, you can set the label and checkbox to display: block; float: left; to remove the unclickable space and add a small padding to add some clickable space.
    – Lie Ryan
    Jul 13, 2012 at 9:48
  • 3
    His first scenario is valid, although it is redundant.
    – zzzzBov
    Jul 13, 2012 at 13:16
  • So that's supposed to change in HTML5? Interesting.
    – jcolebrand
    Jul 13, 2012 at 15:55
  • The first scenario in the original question, as zzzzBov stated, is valid. It is not redundant, even though it may seem so, as some assistive devices rely on the explicit for and id attributes for properly associating inputs and labels. Therefore, it is probably better for users requiring assistive devices to use for and id whether or not you wrap labels around input tags. Jul 16, 2015 at 15:46
1

Clicking the label is sometimes used for gaining access to additional information about the selection, or instantiating the tooltip on click instead of on mouseover for some aesthetic purpose. Unless, necessary, the best approach is usually to maximize the clickable region, even if not well-defined visually (boxes in boxes are best avoided whenever possible).

1

Yes the space between a checkbox and its label should be clickable. This is because if a user clicks the space in between its usually because they intentionally wanted to click the checkbox or text label, but accidentally moved their mouse to the gap. You should account for these user mistakes and make the gap clickable too.

Here's a good article that shows you the right way to make your checkboxes clickable: Why Your Form Checkboxes Need to Have Label Tags

2
  • 1
    Could you pull some quotes from that article in case the link ever becomes broken? Apr 5, 2014 at 18:05
  • Main takeaway for me was the last two paragraphs: "Checkboxes without label tags are inaccessible to screen readers. Screen readers can’t figure out which label belongs to which checkbox based on positioning alone." "Label tags act as an anchor for form controls. It not only works for checkboxes, but you should use it for every form control that has a label."
    – pearso
    Apr 5, 2014 at 21:13
-1

In my opinion, yes. It is simply a continuation of the control with the same action as opposed to two separate actions.

The only case I can see where you wouldn't want this to happen is if clicking in either space resulted in different actions. (i.e. clicking a label selected any children, other items related to the same topic, etc.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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