References

Beginner-friendly references for web development, with live, editable examples.

The HTML <fieldset> tag

Element All modern browsers Updated
Quick answer

The HTML <fieldset> element groups related controls in a form, with a <legend> as its caption. The disabled attribute disables every control inside it at once.

Overview

The <fieldset> element groups thematically related form controls — a set of radio buttons, an address block, a payment section — and its first child, a <legend>, gives the group a caption.

This grouping matters most for radio-button sets. There, the <legend> supplies the question ("Choose a shipping method") and each radio its answer, and screen readers announce the legend with each option so the choices make sense in context. Without a fieldset, a lone radio button has no idea what group it belongs to.

A handy bonus: adding the disabled attribute to a <fieldset> disables every control inside it in one go. Browsers draw a border around it by default, which you can restyle or remove freely with CSS.

Syntax

<fieldset>
  <legend>Contact preference</legend>
  <label><input type="radio" name="c"> Email</label>
  <label><input type="radio" name="c"> Phone</label>
</fieldset>

Attributes

The <fieldset> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
disabled A boolean attribute — present or absent. Disables a form control.
form The id of a <form> element. Associates a control with a form by id.
name A string (the field name used in the submitted data). Names a form control for submission.

Example

Live example 
<fieldset style="border:1px solid #cbd5e1;border-radius:6px;">
  <legend>Size</legend>
  <label><input type="radio" name="s"> Small</label>
  <label><input type="radio" name="s"> Large</label>
</fieldset>

Best practices

  • Group related controls — especially radio-button sets — in a <fieldset>.
  • Make a <legend> the first child to caption the group.
  • Use the disabled attribute to disable all the controls inside at once.
  • Restyle or remove the default border with CSS to match your design.

Accessibility

A <fieldset> with a <legend> gives a group of controls a shared, announced name — essential for radio-button groups, where screen readers read the legend together with each option ("Contact preference, Email, radio button").

Frequently asked questions

What is the fieldset element for?
To group thematically related form controls and caption them with a <legend> — most importantly for radio-button sets.
Do I need a legend with a fieldset?
You should include one. The <legend> gives the grouped controls a shared accessible name, which is what makes radio groups understandable.
How do I disable a group of form fields at once?
Add the disabled attribute to the <fieldset>; all controls inside become disabled.
How do I remove the default fieldset border?
Set border: 0 (and adjust padding/margin) on the <fieldset> with CSS.
embed figcaption