I'm working on an admission application page and in one section of it there is a list of checkbox controls indicating the user has read/agreed to various policies or conditions and certifying the information is correct. Some of these labels can be rather long wrapping to 2, 3 or 4 lines depending on the screen size.

Each of the checkboxes are setup similar to:

    <input type="checkbox">
    I certify that all the above information is correct yada yada yada...

While developing the page, one thing that kept happening that I found annoying was I'd accidentally check or uncheck boxes by clicking the label when changing focus from my editor to the browser. When clicking to focus the browser I'd happen to hit one of these long labels.

That got me thinking about shorting the actual tag to only encompass the first few words, or first sentence if there are multiple. For instance

<input type="checkbox" id="certify">
<label for="certify">I certify that all the above information is correct</label> yada yada yada...

Is it worth considering shortening the label like that to avoid accidental changes, or should I just leave it as is?

In this particular case all the checkboxes are required, so accidentally un-checking one would be caught by validation. However I wonder if this could be an issue for an optional but important checkbox.

  • On Windows, I learned to use Alt+Tab / click only in safe areas long time ago (after several frustrating mistakes). And this doesn't happen on Mac - when you click on a non-active window, it only activates, it does not trigger any events on individual elements... – Aprillion Jun 26 '16 at 11:06

I don't believe it's an issue, however, if you're worried about it, you could rephrase each statement to have the assertions ("The above is correct and yada yada...") followed by the checkbox with "I agree" as the label.

I'd watch how people use your page and see if any of them have this problem before trying to fix a problem that may or may not exist "in the wild."


If you could add a line break, you can limit the <label> to only 1 line. Or if you don't use the label at all, the user would have to click on the check box itself and that would be solve the problem in a consistent way.

However, splitting the label in the middle of a sentence is a bit strange - still possible to click on it by accident, while clicking a little bit to the right on purpose would not select anything...

The question is if clicking by accident is an important problem to solve - how often do you expect real users to go outside of the browser in the middle of completing the form? Have you tested with potential users or only noticed this yourself while developing the app and switching from IDE to browser?


A checkbox label should be max. 100 chars long.

If you need more, you could add a "Read more..." button.

It think this is a better method then throwing 5 copies of Lorem Ipsum to the user every time they need to use a checkbox.

  • 2
    Where are you getting this guideline from? – maxathousand Jun 26 '16 at 20:47
  • 2
    Also, the checkboxes he describes in his example are certifying that users have read/agree to certain terms or verifying that information is accurate. These statements are often legally binding, so the "Read more" suggestion would not work. – maxathousand Jun 26 '16 at 20:50
  • @maxathousand I get it from pure experience as being a user and a developer. – HKYL Jun 26 '16 at 20:52

I would consider a long label a problem: people don't usually read long text, especially if it is some legalese. But not for the reason you specify in the OP: accidental clicking is not an issue, especially when all checks are required.

I have seen on multiple occasions companies giving me the one single check box, saying "I agree to (this site) (link: privacy policy) and (link: terms of service)" (add as many further links nobody will ever click as you wish ;) )

This form keeps the label short and gives the user an opportunity to obtain a full description of what they are aggreing to, if they so wish.

Your Answer

