<fieldset>

By Dan Gold

<fieldset> groups related controls. Its first legend gives the group a caption, which helps explain radio or checkbox choices.

A working example

HTML and CSS

HTML

<fieldset>
  <legend>Delivery method</legend>
  <label
    ><input type="radio" name="delivery" value="email" checked /> Email</label
  ><label><input type="radio" name="delivery" value="post" /> Post</label>
</fieldset>

CSS

/* Optional presentation */
label {
  display: block;
  margin: 0.75rem 0 0.25rem;
}
input,
select,
textarea,
button {
  font: inherit;
  max-width: 100%;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Use it in a form

Use a group when the question belongs to several controls. Each control still needs its own label. Native group semantics supplement the controls’ accessible names.

Common mistakes and accessibility

disabled disables descendant controls, except those inside its first legend. Its form attribute associates the fieldset itself with a form, but does not automatically associate each child control outside that form; those controls need their own association.

Continue with legend for the related behavior.

Sources and browser support

MDN: fieldset describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.