Technology that earns its place.

Give Related Form Choices a Shared Question With Fieldset and Legend

Laptop displaying a grouped set of form choices.
AI-generated photographic illustration; not documentary photography.

Three radio buttons say “Morning,” “Afternoon” and “Evening.” Each has a readable label, but the user still needs to know what those choices describe: a delivery time, a callback or an event session.

A group caption supplies that missing question. In HTML, a fieldset can group related controls and a legend can name the group. The MDN fieldset reference explains the native relationship and its attributes.

Write the shared question first

For an original booking example, use “Preferred callback time” as the legend, with the three time periods as individual labels. The group caption should make sense when read alongside each choice. “Options” adds much less information.

Keep the labels attached to their actual inputs. A legend does not replace them, and a visual heading outside the group is not automatically an equivalent programmatic relationship. Avoid choosing markup solely because its default border resembles a design mock-up.

Keep the implementation small

  1. Identify controls that answer one shared question.
  2. Wrap that set in a fieldset and place its legend first.
  3. Give each input a clear, correctly associated label.
  4. For mutually exclusive radio choices, configure the group consistently.
  5. Test the resulting interaction with keyboard and supported assistive technology.

Not every pair of neighbouring fields needs a new group. Repeated or unnecessary captions can make a short form more cumbersome. Group by meaning, then use CSS for spacing and appearance.

Test the words as well as the controls

Listen to the form with a screen reader in the browsers your audience uses. Can someone identify the question, move through the choices and understand which option is selected? Also inspect the layout at a narrow width and with enlarged text.

If the test reveals confusing repetition, shorten the shared caption without losing its meaning. If the question disappears, repair the association rather than adding another decorative heading. The useful result is a set of choices that remains understandable whether someone sees the whole screen or encounters one control at a time.