Fieldset and Legend — Grouping Related Form Controls

In this tutorial, you will learn about Fieldset and Legend. We cover key concepts, practical examples, and best practices to help you master this topic.

The fieldset element groups related form controls together, and the legend provides a label for that group, essential for radio buttons, checkboxes, and address sections.

What You'll Learn

How to use fieldset and legend to group form controls, when to apply them, and how screen readers announce grouped fields.

Why It Matters

Without fieldset and legend, screen reader users navigate through several radio buttons without understanding what they are choosing. The legend provides the context that ties the group together.

Real-World Use

A payment form has a radio group for selecting credit card type. The fieldset legend says "Select your card type," and each radio button is announced with this context so the user understands the choice they are making.

Fieldset and Legend Example

<fieldset>
  <legend>Shipping method</legend>

  <input type="radio" id="standard" name="shipping" value="standard">
  <label for="standard">Standard (5-7 business days)</label>

  <input type="radio" id="express" name="shipping" value="express">
  <label for="express">Express (2-3 business days)</label>

  <input type="radio" id="overnight" name="shipping" value="overnight">
  <label for="overnight">Overnight (next day)</label>
</fieldset>

Styling Fieldset

fieldset {
  border: 1px solid #ccc;
  padding: 1rem;
  margin-bottom: 1rem;
}

legend {
  font-weight: bold;
  padding: 0 0.5rem;
}

Nested Fieldsets

<fieldset>
  <legend>Contact information</legend>

  <label for="email">Email</label>
  <input type="email" id="email" name="email">

  <fieldset>
    <legend>Phone number</legend>
    <label for="phone">Primary phone</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>
</fieldset>

Common Mistakes

1. Omitting legend

A fieldset without a legend does not provide group context to screen readers.

2. Using multiple legends in one fieldset

A fieldset should have exactly one legend as the first child.

3. Styling legend with display: none

display: none removes the legend from the Accessibility tree. Use sr-only instead.

4. Grouping unrelated fields

Only group controls that are semantically related, such as radio buttons in a set.

5. Nesting fieldsets without reason

Only nest fieldsets when there is a hierarchical relationship between groups.

Practice Questions

1. What is the purpose of the legend element? The legend provides a label for the group of controls inside the fieldset, announced by screen readers as context for each control.

2. Can you use fieldset for a single control? Technically yes, but it is unnecessary. Use fieldset when you have two or more related controls.

3. How does a screen reader announce a radio group with fieldset/legend? It announces the legend text followed by each radio button label, for example: "Shipping method, Standard radio button, not checked."

Challenge: Create a checkbox group for selecting newsletter topics. Use fieldset and legend so screen reader users know the context of each checkbox.

FAQ

Mini Project

Take a long form with 20+ fields. Identify which fields should be grouped (shipping/billing addresses, payment method, preferences). Wrap each group in fieldset with a descriptive legend.

What's Next

Explore Input Types and how semantic input types improve the experience for users on mobile devices and screen readers.