Grouping controls

Groupings of form controls, typically groups of related checkboxes and radio buttons, sometimes require a higher level description. Grouping related form controls makes forms more understandable for all users, as related controls are easier to identify.

Associating related controls with fieldset

Grouping needs to be carried out visually and in the code, for example, by using the <fieldset> and <legend> elements to associate related form controls. The <fieldset> identifies the entire grouping and <legend> identifies the grouping's descriptive text.

Example #1: radio buttons

In the example below, there are three radio buttons that allow the user to choose an output format. Radio button groups should always be grouped using <fieldset>.

Output format

Source code:

<legend>Output format</legend>

<div>

</div>

<div>

</div>

[…]

</fieldset>

Example #2: checkboxes

In the example below, there are three checkboxes that are all part of an opt-in function for receiving different types of information.

I want to receive

Source code:

<legend>I want to receive</legend>

<div>

<label for="check_1">The weekly newsletter</label>

</div>

[…]

</fieldset>

Associating related controls with WAI-ARIA

WAI-ARIA provides a grouping role that functions similarly to fieldset and legend. For example, a div element can have role=group to indicate that the contained elements are members of a group.

WAI-ARIA roles are very important in the accessibility world, and we invite you to see an example provided in the associated WAI tutorial. See also this MDN's article about about WAI-ARIA roles.