The fieldset and legend elements

Definition

fieldset groups related controls, and its first legend child names the group. The pair is especially useful when individual labels answer one shared question, as with a set of radio buttons or checkboxes.

Minimal syntax

<fieldset>
  <legend>Preferred contact method</legend>
  <label><input type="radio" name="contact" value="email" /> Email</label>
  <label><input type="radio" name="contact" value="phone" /> Phone</label>
</fieldset>

Each option has its own label, while the legend supplies the question that gives those options meaning.

Grouping decisions

Use a fieldset when the relationship must remain available outside visual layout. A generic wrapper and heading may look identical but may not provide the same group name. Do not wrap an entire long form in one fieldset merely to draw a border; group the smallest meaningful sets and keep independent fields outside unnecessary groups.

Browser and accessibility behavior

Browsers commonly draw a border and place the legend across it, though CSS can change that presentation. Assistive technology may announce the legend as a person enters controls in the group. Applying disabled to a fieldset disables most descendant controls together, with a defined exception for content inside the first legend.

Common failures

• Radio options have labels but no group question.
• The legend is visually hidden even though sighted users need the question.
• CSS layout breaks the legend or clips focus indicators around controls.
• A disabled fieldset communicates state only through faded color.

Verification checklist

Navigate the group with a keyboard and screen reader. Confirm the question is announced with enough context but not repeated excessively. Test zoom, long legends, validation messages, and forced colors. If the group becomes disabled, ensure an explanation remains perceivable and confirm disabled controls are not submitted as successful form values.

Submit the group empty, with one choice, and with every allowed combination. Confirm server-side validation identifies the group in words and returns focus or an error-summary link to a useful location without erasing other valid answers.