@ou-imdt/css/docs/native/fieldset-legend.md

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

# fieldset

Grouping related form controls makes forms more understandable for all users, as related controls are easier to identify. It also makes it easier for people to focus on smaller and more manageable groups rather than try to grasp the entire form at once.

<cite>
  <a href="https://www.w3.org/WAI/tutorials/forms/grouping/">wcag tutorials - grouping</a>
</cite>

A typical example of using fieldsets is grouping billing address fields and grouping shipping address fields.

The 'fieldset' is the group container while the 'legend' if the heading for that container.

Depending on configuration some screen readers will read the legend only once, with every form field or not at all, with this in mind consider the below.

- Keep legends short.
- Make labels self explanatory as much as possible.

## Example

<div class="card">
  <fieldset>
    <legend>Shipping Address:</legend>
    <div>
      <label for="shipping_name">
        Name
      </label>
      <input type="text" name="shipping_name" id="shipping_name">
    </div>
    <div>
      <label for="shipping_street">
      Street
      </label>
      <input type="text" name="shipping_street" id="shipping_street">
    </div>
  </fieldset>
</div>

<details class="compact">
  <summary>HTML</summary>

```html
<fieldset>
    <legend>Shipping Address:</legend>
    <div>
      <label for="shipping_name">
        Name
      </label>
      <input type="text" name="shipping_name" id="shipping_name">
    </div>
    <div>
      <label for="shipping_street">
      Street
      </label>
      <input type="text" name="shipping_street" id="shipping_street">
    </div>
  </fieldset>
```

</details>