# Fieldset

> A fieldset groups related fields under a legend, which makes long forms easier to scan and gives the group a name for assistive tech.

Group related form fields with a styled fieldset to make long forms better organized and easier to understand.

Source: https://docs.tabler.io/ui/forms/fieldset

---

## Default markup

Wrap related fields in a `fieldset` to group them.

Give every fieldset a `legend`. The legend names the group, and it is the only thing that does - a heading placed above the fieldset looks the same but is not connected to the fields.

```html
<fieldset class="form-fieldset">
  <legend class="form-label">Contact details</legend>
  <div class="mb-3">
    <label class="form-label required" for="fieldset-name">Full name</label>
    <input type="text" id="fieldset-name" class="form-control" autocomplete="name" required />
  </div>
  <div class="mb-3">
    <label class="form-label required" for="fieldset-company">Company</label>
    <input type="text" id="fieldset-company" class="form-control" autocomplete="organization" required />
  </div>
  <div class="mb-3">
    <label class="form-label required" for="fieldset-email">Email</label>
    <input type="email" id="fieldset-email" class="form-control" autocomplete="email" required />
  </div>
  <div class="mb-3">
    <label class="form-label" for="fieldset-phone">Phone number</label>
    <input type="tel" id="fieldset-phone" class="form-control" autocomplete="tel" />
  </div>
  <label class="form-check">
    <input type="checkbox" class="form-check-input" required />
    <span class="form-check-label required">I agree to the Terms &amp; Conditions</span>
  </label>
</fieldset>
```

## Grouping choices

A fieldset is the only correct way to group a set of radios or checkboxes. Without it the options are read one by one with no idea what question they answer.

```html
<fieldset class="form-fieldset">
  <legend class="form-label">How should we contact you?</legend>
  <label class="form-check">
    <input type="radio" class="form-check-input" name="fieldset-contact" checked />
    <span class="form-check-label">By email</span>
  </label>
  <label class="form-check">
    <input type="radio" class="form-check-input" name="fieldset-contact" />
    <span class="form-check-label">By phone</span>
  </label>
  <label class="form-check">
    <input type="radio" class="form-check-input" name="fieldset-contact" />
    <span class="form-check-label">Do not contact me</span>
  </label>
</fieldset>
```

## Disabling a group

The `disabled` attribute on a `fieldset` disables every control inside it at once, so you do not have to set it on each field.

## Accessibility

- Every fieldset needs a `legend`, and it has to be the first child. A fieldset without one groups the fields visually but says nothing.
- Keep the legend short. It is read before every field in the group, so a long sentence is repeated on each one.
- Do not use a fieldset just to draw a box. A group that has no name is noise for a screen reader - use a plain `div` instead.
- Radios and checkboxes that belong to one question always go in a fieldset. Text fields only need one when they really form a set, such as an address.
- `disabled` on the fieldset takes every control inside out of the tab order and out of the submitted data. Use `readonly` on individual fields when the values should still be sent.