Nested Fieldset/Legend Structures

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.

Nesting <fieldset>/<legend> structures are possible, especially when groups of radio buttons or checkboxes play a role.

Working Example

Personal Details
Gender

Explanation

But you should not overdo that: while screen readers uniformly announce when a grouping is entered, some do not announce when it is exited. As such, too much nesting can quickly become confusing.

Code

<form>
  <fieldset>
    <legend>Personal Details</legend>
    <div class="control">
      <label for="name">Full name</label><input id="name" type="text" />
    </div>
    <div class="control">
      <label for="biography">Biography</label><textarea id="biography"></textarea>
    </div>
    <fieldset>
      <legend>Gender</legend>
      <div class="control">
        <input id="gender_male" name="gender" type="radio" /><label for="gender_male">Male</label>
      </div>
      <div class="control">
        <input id="gender_female" name="gender" type="radio" /><label for="gender_female">Female</label>
      </div>
    </fieldset>
  </fieldset>
  <div class="control">
    <input id="accept_agbs" type="checkbox" /><label for="accept_agbs">I accept the terms and conditions</label>
  </div>
</form>
.control, fieldset {
  margin: 6px 0;
}

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

input + label {
  width: auto;
}
NIL