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.
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.
<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 & 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.
<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
divinstead. - 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.
disabledon the fieldset takes every control inside out of the tab order and out of the submitted data. Usereadonlyon individual fields when the values should still be sent.
