Grouping form elements

Group related form controls to provide clear structure and context, especially in complex forms with sets of related inputs (e.g., radio buttons). Proper grouping improves navigation and comprehension for all users, including those using assistive technologies or keyboard-only navigation.

Technique #1: <fieldset> and <legend>

The <fieldset> element groups related form controls together while the <legend> element acts as a caption for the entire <fieldset>, providing a concise description of the grouped fields, which further clarifies their purpose.

<h1>Choose Your Favorite Ice Cream Flavor</h1>
<form>
  <fieldset>
    <legend>Ice Cream Flavors</legend>
    <div>
      <input type="radio" id="chocolate" name="flavor" value="chocolate">
      <label for="chocolate">Chocolate</label>
    </div>
    <div>
      <input type="radio" id="vanilla" name="flavor" value="vanilla">
      <label for="vanilla">Vanilla</label>
    </div>
    <div>
      <input type="radio" id="strawberry" name="flavor" value="strawberry">
      <label for="strawberry">Strawberry</label>
    </div>
  </fieldset> 
  ...
</form>

Technique #2: role="group"

The role="group" technique is an alternate approach to using <fieldset>/<legend> and specifies that multiple input elements are related and should be considered as a collective unit. Use aria-labelledby to provide a caption for the grouped fields.

<h1 id="choose_flavor">Choose Your Favorite Ice Cream Flavor</h1>
<form>
  <div role="group" aria-labelledby="choose_flavor">
    <div>
      <input type="radio" id="chocolate" name="flavor" value="chocolate">
      <label for="chocolate">Chocolate</label>
    </div>
    <div>
      <input type="radio" id="vanilla" name="flavor" value="vanilla">
      <label for="vanilla">Vanilla</label>
    </div>
    <div>
      <input type="radio" id="strawberry" name="flavor" value="strawberry">
      <label for="strawberry">Strawberry</label>
    </div>
  </div> ...
</form>