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

Groups of checkboxes are very similar to radio buttons, and hence are grouped most of the time:

Working Example

Hobbies

Code

<form>
  <fieldset>
    <legend>Hobbies</legend>
    <div class="control">
      <input id="hobbies_hiking" type="checkbox" /><label for="hobbies_hiking">Hiking</label>
    </div>
    <div class="control">
      <input id="hobbies_dancing" type="checkbox" /><label for="hobbies_dancing">Dancing</label>
    </div>
    <div class="control">
      <input id="hobbies_gardening" type="checkbox" /><label for="hobbies_gardening">Gardening</label>
    </div>
  </fieldset>
</form>
.control, fieldset {
  margin: 6px 0;
}

label {
  display: inline-block;
  width: 120px;
  vertical-align: top;
}
NIL