HTML / Element

How to Use the fieldset Element

The HTML fieldset element groups related form controls. It is useful when several choices belong to one question, such as “Which contact method should we use?”

Key idea

Put a legend inside the fieldset to give the group a name. Give each individual control its own label.

The element is not only a visual border. It communicates the meaning of the group in the HTML structure and can help assistive technology present the question and its choices together.

Minimal example

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

legend names the group, while the two label elements name the individual choices.

What it looks like

The border can look different across browsers and CSS. The important part is that the HTML identifies these controls as choices belonging to the same question.

What the parts mean

Element	Role	Example
`fieldset`	Groups related form controls	The complete set of contact choices
`legend`	Names the group or question	Contact method
`label`	Names an individual control	Email or Phone

When to use it

Use fieldset when multiple controls answer one shared question or form a meaningful group.

Choose one contact method from Email or Phone.
Select several services that you want to use.
Group the related parts of an address.

It does not replace the form element. A form represents the form and its submission, while a fieldset represents a group inside it.

Disable a group

<fieldset disabled>
  <legend>Not available yet</legend>
  <label><input type="radio" name="plan" value="basic"> Basic</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>

When disabled is set on a fieldset, its descendant form controls are disabled except for controls inside the first legend child. This can be clearer than disabling every control separately.

Common mistakes

Using only a div and never expressing the group in HTML.
Leaving out legend, so the group has no clear question or name.
Using the group’s legend as a substitute for labels on individual controls.
Assuming that giving fieldset a name submits the group itself. The controls inside the group are normally what participate in form submission.

Check it in Atlas

For the content model, form association, disabled propagation, HTMLFieldSetElement, and accessibility mappings, see the fieldset element in Yugien Atlas. For individual control names, see the label element; for form submission, see the form element.