Fieldsets

Best practices

Use fieldsets and labels (legend tags) to group and describe a set of controls and/or fields within a form. These should be grouped to help users understand what is required of them in a logical way. Try to make the headline concise and informative, but where needed, you can add a short paragraph of text to explain the group.

When to use a fieldset and legend

Use the <fieldset> and <legend> elements when you have:

• A single multiple choice question (using radio buttons or checkboxes).
• Several questions relating to the same topic (like text boxes, or any other type of field).

When not to use a fieldset and legend

Do not use the <fieldset> and <legend> when you have:

• A single form field that asks for a single piece of information.

When used correctly, the <fieldset> and <legend> elements tie related form fields together in a way that is accessible to people who cannot see the visual layout of the form.

How it works

<fieldset>
  <legend>Legend</legend>
    <div class="custom-control custom-radio">
      <input type="radio" id="option1" name="customRadioStacked" class="custom-control-input" checked="">
      <label class="custom-control-label" for="option1">Option 1</label>
    </div>
    <div class="custom-control custom-radio">
      <input type="radio" id="option2" name="customRadioStacked" class="custom-control-input">
      <label class="custom-control-label" for="option2">Option 2</label>
    </div>
    <div class="custom-control custom-radio">
      <input type="radio" id="option3" name="customRadioStacked" class="custom-control-input">
      <label class="custom-control-label" for="option3">Option 3</label>
    </div>
</fieldset>

For an example of fieldsets with several questions relating to the same topic, see our name and address form example.