Fieldset

Use the fieldset component to group related form fields together. The legend describes what the group of fields is about.

When to Use

• When you have multiple related inputs that need a shared label
• For groups of checkboxes or radio buttons
• For date inputs (day, month, year)
• For address fields

Default Fieldset

<fieldset class="fieldset">
  <legend class="fieldset-legend">What is your address?</legend>
  <div class="form-group">
    <label class="form-label" for="address-1">Address line 1</label>
    <input class="form-input" id="address-1" name="address-1" type="text">
  </div>
  <!-- Additional fields... -->
</fieldset>

With Hint Text

<fieldset class="fieldset">
  <legend class="fieldset-legend">
    What is your date of birth?
    <p class="fieldset-hint">For example, 27 3 1985</p>
  </legend>
  <div class="date-input">
    <!-- Date inputs -->
  </div>
</fieldset>

With Radios

As Page Heading

If the fieldset legend is the main question on the page, you can style it as a page heading.

<fieldset class="fieldset">
  <legend class="fieldset-legend fieldset-legend-xl">
    What is your nationality?
  </legend>
  <!-- Form fields -->
</fieldset>

With Error

Accessibility

• The <legend> must be the first child of the <fieldset>
• Screen readers announce the legend when entering the fieldset
• This provides context for each field without repeating information
• Don't nest fieldsets - it causes confusion for screen reader users