HTML / Element

How to Use the legend Element

The HTML legend element gives a group of form controls a shared name or question. Use it when several choices belong together, such as “Which contact method should we use?”

Key idea

Put legend at the start of a fieldset. It names the group, while each individual control gets its own label.

The element is not only text placed on top of a border. It expresses in HTML that these controls belong to the same question or group.

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>

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

What it looks like

Browsers relate the fieldset border to its legend. The border shape and text position can vary with the browser and CSS, but the important part is the group meaning in the HTML.

What fieldset, legend, and label do

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

Put it in the right place

Place legend first inside the fieldset. If another element comes first, the structure no longer gives the legend its intended first-child position.

<!-- The usual structure -->
<fieldset>
  <legend>Delivery method</legend>
  <label><input type="radio" name="delivery" value="mail"> Mail</label>
</fieldset>

<!-- The legend is not the first child -->
<fieldset>
  <p>Choose a delivery method.</p>
  <legend>Delivery method</legend>
</fieldset>

Use heading elements for ordinary page headings and legend for the name of a form-control group.

Disabled fieldsets

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

When disabled is set on a fieldset, descendant form controls are disabled except for controls inside the first legend child. In this example, the legend remains the group description and the control outside it is disabled.

Common mistakes

Using only a div around choices and never expressing their shared question in HTML.
Putting legend outside a fieldset.
Assuming that a legend removes the need for labels on individual controls.
Creating only a visual border with CSS and leaving the group meaning out of the HTML.

Check it in Atlas

For the specification context, fieldset caption, optgroup relationship, disabled boundary, HTMLLegendElement.form, and accessibility mappings, see the legend element in Yugien Atlas. The group itself is covered by the fieldset element, and individual control association by the label element.