An HTML fieldset groups form controls that belong to one topic, while a legend names that group. This gives screen-reader users a clear question or category before they encounter the controls. Build the semantic structure first, then use CSS to add the visual boundary, spacing, and layout.
The HTML fieldset tag is especially useful for radio buttons because the shared name makes the inputs one-choice controls, while the legend identifies what that choice answers.
How does an HTML fieldset group related controls?
Place related controls inside fieldset and put the group label in its first child, legend. Unlike a heading styled to look similar, legend is programmatically associated with the fieldset. Each control still needs its own label. Connect a label’s for value to the input’s unique id, so clicking the text also selects or focuses the control.
Use one name for mutually exclusive radio buttons, and give every option a distinct value. Do not use placeholder text as a substitute for a label: placeholders disappear and do not identify a completed choice reliably.
How does the HTML fieldset tag work in a radio-button form?
This complete radio-button form includes the group label, three individually labelled options, and a submit control:
Complete markup: <form action=”/preferences” method=”post”> <fieldset> <legend>Contact preference</legend> <input type=”radio” id=”email” name=”contact” value=”email” required> <label for=”email”>Email</label> <input type=”radio” id=”phone” name=”contact” value=”phone”> <label for=”phone”>Phone</label> <input type=”radio” id=”none” name=”contact” value=”none”> <label for=”none”>No contact</label> </fieldset> <button type=”submit”>Save preference</button> </form>
The legend, “Contact preference,” labels the entire group. Each label identifies one answer, and the matching for and id attributes preserve that relationship even if the visual layout changes. The shared contact name lets the browser enforce a single radio selection. The required attribute on one radio makes choosing an option mandatory for the group.
How do you disable an entire fieldset?
Add the disabled attribute to the fieldset opening tag when the whole group is unavailable:
Disabled group: <fieldset disabled> <legend>Contact preference (unavailable)</legend> … </fieldset>
Disabled fieldset controls cannot receive focus or user input, and their values are not submitted with the form. The legend remains readable, which allows the group’s status to be communicated. Keep important explanatory text in the legend or nearby content rather than placing interactive controls inside the legend.
How do you style a CSS fieldset?
Use a CSS fieldset rule for the border, padding, and internal layout. Style legend separately because browsers apply their own default border placement and spacing:
CSS: fieldset { border: 2px solid #b8c0cc; padding: 1rem; display: grid; gap: .5rem; max-inline-size: 24rem; } legend { padding-inline: .5rem; font-weight: 700; } fieldset label { display: flex; align-items: center; gap: .5rem; }
The border creates the visual group, while padding keeps controls away from its edge. The grid display and gap property provide consistent vertical spacing without adding presentational markup. The label rule aligns each radio button with its text and enlarges the useful click area. Adjust the border color, thickness, and maximum width to match the surrounding form while keeping sufficient contrast.