0%

<legend> Legend

Names a fieldset and must come first inside it.

By HTML6 (opens in a new tab) · Updated · How we write and check content

<legend> titles a <fieldset>. It has to be the first child, and by default browsers draw it over the fieldset's border.

Phrase it as the question or the group name, say Choose a size, because screen readers read it before every control in the group. It gets repeated a lot, so keep it short.

The legend element definition (opens in a new tab) requires it to be a fieldset's first child. See also the fieldset element.

Syntax

<fieldset>
  <legend>Question or group name</legend>
  <label><input type="checkbox" name="item"> Option</label>
</fieldset>

When to use it

The <legend> names the group of controls in a fieldset. Write it as the question the group answers: "How should we contact you?", "Shipping address", "Which days can you attend?". Read it aloud before each option. If it sounds wrong, rephrase it.

A heading or a paragraph above the group may look the same. Neither is tied to the controls, though, and a screen reader user who tabs straight into the checkboxes never hears it. Want the group in the page outline as well? Put the heading inside the legend. The standard allows <legend><h2>Payment</h2></legend>, and the element then does both jobs.

Few people know this: controls inside the legend of a disabled fieldset stay enabled. It is on purpose. A checkbox like "Use a different delivery address" in the legend can then turn the group on and off through a script. Expect a surprised colleague the first time they see it. The fieldset reference has more on grouping.

Live example

Edit the code and watch the preview.

<fieldset>
  <legend>Choose a size</legend>
  <label><input type="radio" name="size" value="s"> Small</label>
  <label><input type="radio" name="size" value="l"> Large</label>
</fieldset>

More examples

Legend as a question

Here the legend is the question and the checkboxes are the answers. A screen reader may say "Which days can you attend? Monday, checkbox". Every option makes sense alone, even for a user who tabs straight into the group.

<form>
  <fieldset>
    <legend>Which days can you attend?</legend>
    <label><input type="checkbox" name="days" value="mon"> Monday</label>
    <label><input type="checkbox" name="days" value="wed"> Wednesday</label>
    <label><input type="checkbox" name="days" value="fri"> Friday</label>
  </fieldset>
  <button>Send</button>
</form>

Heading inside a legend

Each group in a long checkout doubles as a page section. With an <h2> inside the legend, the group name shows up in the heading outline and people can jump to it. It still labels the radio buttons as well.

<form>
  <fieldset>
    <legend><h2>Payment</h2></legend>
    <label><input type="radio" name="pay" value="card" checked> Card</label>
    <label><input type="radio" name="pay" value="bank"> Bank transfer</label>
  </fieldset>
  <button>Pay now</button>
</form>

Tip: Short legends work best. Each control repeats it.

Browser support

All browsers support legend, and it is in the HTML Living Standard. Browsers render it specially, cut into the fieldset border, so some CSS acts strangely on it. A common trick for full styling is to float it or give it position:absolute, which pulls it out of the border. Current HTML allows headings inside a legend.

Accessibility

Many screen readers repeat the legend before every control in the group, so short is better. The W3C tutorial on grouping controls (opens in a new tab) includes examples of short legends.

Common mistakes

Wrong

<fieldset>
  <input type="checkbox" id="a">
  <legend>Extras</legend>
</fieldset>

Right

<fieldset>
  <legend>Extras</legend>
  <input type="checkbox" id="a">
</fieldset>

A fieldset's first child has to be its legend.

Frequently asked questions

Where must the legend go?

First inside its <fieldset>. A <legend> has to be the first child, and by default browsers draw it on top of the fieldset border. Each fieldset gets one legend at most. It may contain phrasing content and, under the current standard, headings as well, which helps when the fieldset is a major section of the form.

How do I style a legend?

Legends get special default rendering that places them on the border. To make one behave like ordinary text, use legend{float:left;width:100%;padding:0} followed by a clear, or remove the fieldset border with fieldset{border:0;padding:0;margin:0}. Leave the legend visible, though. Sighted users need to see the question too.

Practise it

Related forms elements

<form>Wraps the controls whose values get sent to a server.<label>Names a form control; clicking the label focuses the control.<input>All-purpose form control; type picks text, email, number, checkbox, date and more.<button>A button that submits a form, resets it or runs some command.<select>A drop-down menu of options.<option>A single choice in a select, datalist or optgroup.<optgroup>Puts related options in a select under one label.<textarea>A multi-line field for longer input such as messages.<fieldset>Groups related form controls and names them with a legend.<datalist>Suggested values for an input; people can still type whatever they like.<output>Displays the result of a calculation or a user action.<progress>Shows how far along a task is, like a file download.<meter>A gauge for a value inside a known range, such as battery level.