Fieldset HTML: Group Form Controls with a Legend

Use an HTML fieldset to group related controls and a legend to name the group. In an HTML form, a fieldset gives a set of choices shared context while each control keeps its own label. This is especially valuable when individual radio-button labels would otherwise be ambiguous.

HTML Form Fieldset with Radio Buttons

The following form asks for one delivery method. The fieldset HTML element contains both options, and the first child legend names the question:

<form action="/delivery" method="post">
  <fieldset>
    <legend>Delivery method</legend>
    <div>
      <input type="radio" id="standard" name="delivery" value="standard" required>
      <label for="standard">Standard delivery</label>
    </div>
    <div>
      <input type="radio" id="express" name="delivery" value="express">
      <label for="express">Express delivery</label>
    </div>
  </fieldset>
  <button type="submit">Continue</button>
</form>

Both radios share the name value delivery, so they form one choice set; selecting one deselects the other. The selected option’s value is submitted under that name. required makes a choice necessary before normal form submission. The server must still validate received data, including whether the selected value is permitted.

An HTML form fieldset provides semantic grouping as well as a visual boundary in default browser styles. A fieldset in an HTML form connects that caption to the related controls. The browser can expose the group and its legend to assistive technology, giving the reader context for the options. Exact announcements vary with browser and screen reader, so test the combinations your audience uses.

Keep a Label for Each Control

The legend names the group, not each individual radio button. Each label above has a for value matching a unique input id. This association supplies an accessible name and makes the label clickable. Write option labels that make sense on their own as well, because a screen reader may not repeat the group name every time.

The HTML group can contain other related controls too. For example, separate shipping and billing address fields into two fieldsets with distinct legends, while retaining labels such as “Street address” for each input. Use a fieldset for a meaningful relationship, not merely to draw a box around arbitrary page content. Avoid unnecessary nesting, which can make the relationship harder to follow.

The W3C form grouping guide shows additional radio, checkbox, and address examples. A visual heading or border alone does not create the same programmatic relationship.

Understand Disabled Groups

Adding disabled to a fieldset disables its descendant form controls, with one important exception: controls inside its first child legend are not disabled by that fieldset. They can still be disabled separately or by another applicable disabled ancestor. The exception can support a control in the legend that enables the remaining fields, but that behavior requires application logic.

Disabled controls generally cannot be edited or focused by the user, do not participate in constraint validation, and are not submitted with the form. A script can still change their values. If a value must be submitted while a field is unavailable, design that behavior explicitly rather than assuming the disabled control will send it. The HTML standard defines the exception.

CSS can restyle an HTML fieldset and its legend, including removing the default border, without removing their semantics. Preserve a visible relationship between the controls and keep focus indicators easy to see. Test narrow layouts as well as zoomed text so labels and options remain readable.

Accessibility Checklist

• Place a concise legend first inside each meaningful group.
• Associate every control with its own clear label and a unique ID.
• Use a shared name for mutually exclusive radios and distinct values for their choices.
• Navigate by keyboard and test with a screen reader; check the group name, each label, and focus visibility.
• If the group is disabled, test the first-legend exception and confirm which values are submitted.