Non-related Checkboxes

Grouping form controls in a meaningful way can make them much easier to handle for everyone. While most controls can be grouped, some must be grouped. The fieldset/legend structure is available for exactly that – it can even be nested. And if its visual limitations are a problem, ARIA can be of help.

In contrast to radio buttons though, checkboxes do not imperatively relate to each other. So there may be situations where a number of non-related checkboxes can stand on their own, without being grouped:

Working Example

Explanation

This is also reflected by the fact that each checkbox’s name attribute is different.

Notice: single checkboxes, like “Accept terms and conditions”, do not need a <fieldset>/<legend>. Still, it can make perfect sense to put them into their own <fieldset>/<legend>, maybe together with some related link(s) or text.

Code

<form>
  <div class="control">
    <input id="pizza" type="checkbox" /><label for="pizza">I like pizza.</label>
  </div>
  <div class="control">
    <input id="weather" type="checkbox" /><label for="weather">The weather is sunny.</label>
  </div>
  <div class="control">
    <input id="info" type="checkbox" /><label for="info">I would like to receive more information about this.</label>
  </div>
</form>

.control {
  margin: 6px 0;
}

NIL