<fieldset> & <legend> Tags in HTML

Quick facts

Category	Flow content, form-associated (listed), palpable content
Content model	An optional <legend> first, followed by flow content
Tag omission	Neither the start nor the end tag can be omitted, for either element
Permitted parents	<fieldset>: any element that accepts flow content. <legend>: a <fieldset>, as its first child
DOM interfaces	`HTMLFieldSetElement`, `HTMLLegendElement`

Syntax

<fieldset>
  <legend>Delivery method</legend>
  <label><input type="radio" name="ship" value="std"> Standard</label>
  <label><input type="radio" name="ship" value="exp"> Express</label>
</fieldset>

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

<fieldset>

Attribute	Description
disabled	Turns off every form control inside the group (controls inside the <legend> stay active)
name	A name for the group, used in scripts
form	The `id` of a <form> to belong to, if the fieldset sits outside it

<legend>

Attribute	Description
—	Only the global attributes apply.

Common examples

A group of radio buttons

The classic use: the legend asks the question, each radio button is an answer.

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

A checkout form split into sections

Long forms are easier to fill in when related fields are grouped under clear legends.

<form>
  <fieldset>
    <legend>Shipping address</legend>
    <label for="street">Street</label> <input id="street" name="street">
    <label for="city">City</label> <input id="city" name="city">
  </fieldset>
  <fieldset>
    <legend>Payment</legend>
    <label for="card">Card number</label> <input id="card" name="card" inputmode="numeric">
  </fieldset>
</form>

Turning a whole group on or off

The disabled attribute on the fieldset disables every field inside it at once.

<label><input type="checkbox" id="gift"> This is a gift</label>
<fieldset id="giftbox" disabled>
  <legend>Gift message</legend>
  <textarea name="message"></textarea>
</fieldset>

<script>
  gift.addEventListener("change", () => giftbox.disabled = !gift.checked);
</script>

<fieldset> vs <div>

A <div> can group form fields visually, but it tells assistive technology nothing. A <fieldset> with a <legend> creates a named group: when a screen reader user moves into it, they hear the legend (“Preferred contact method”) before each option, so a lone “Email” radio button makes sense.

Use a fieldset whenever several fields answer one question or belong to one topic. Use a div when you just need a wrapper for layout. Remember that the default border can be removed with CSS — the meaning stays.

	<fieldset>	<div>
Group name for screen readers	Yes (<legend>)	No
Disable all fields at once	Yes	No
Default style	Border + legend	None

Common mistakes to avoid

Radio buttons without a fieldset. Screen reader users then hear “Yes” and “No” with no idea what the question was.
Using a heading instead of a legend. A heading above the group isn’t connected to the fields; the legend is.
Wrapping a single field in a fieldset. One field just needs a <label>.
Placing the legend anywhere but first. The <legend> must be the first child of the fieldset.

Accessibility & SEO tips

Keep legends short — screen readers may repeat them for every field in the group.
Fieldsets are the clearest way to group radio buttons and checkboxes, which also makes forms easier for everyone to scan.
Disabled fields are skipped when the form is submitted, so don’t disable a group that contains data you still need.

Browser support

Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.

Tutorial: HTML forms tutorial

Related tags

Frequently asked questions

When should I use a <fieldset>?

Use it whenever several controls answer one question, like a group of radio buttons or checkboxes, or belong together, like the lines of an address. The legend then works as the question.

How do I remove the default border of a <fieldset>?

Use CSS: fieldset { border: none; padding: 0; margin: 0; }. The grouping still works for screen readers without the visible border.

What does the disabled attribute on a <fieldset> do?

It disables every input, select, textarea and button inside it in one go, and their values are not submitted. It is handy for sections of a form that don't apply yet.

Do I need a <fieldset> for a group of checkboxes?

Yes, if they answer one question such as "Which topics interest you?". The legend holds the question, and each checkbox keeps its own label.

Can I nest fieldsets?

Yes, but keep it shallow. Each nested legend is announced, so deep nesting gets long-winded for screen reader users.

How do I style the <legend>?

Style it like any text: font-size, font-weight, color and padding all work. To place it outside the border, use float: left; width: 100%; and give the next element clear: both.