HTML tagForms

<fieldset>

A group of related form fields with a border and a `<legend>` caption.

Display: block
Closing tag: Required
Permitted content: An optional <legend> as the first element, then flow content

On this page

Example
Definition and usage
Syntax
Attributes
Attributes in practice
Default CSS
Browser support
Good practices
Related entries

Example

HTML

<form>
  <fieldset>
    <legend>Skill level</legend>
    <div><label><input type="radio" name="level" value="beginner" checked> I'm starting from zero</label></div>
    <div><label><input type="radio" name="level" value="basics"> I know HTML basics</label></div>
    <div><label><input type="radio" name="level" value="advanced"> I already write JavaScript</label></div>
  </fieldset>
</form>

Preview

Definition and usage

The <fieldset> element bundles several related fields into one group, for example "Contact details" or "Shipping address". By default, the browser draws a border around the group and displays the first <legend> element on its top edge as a caption.

The group matters a lot for accessibility with radio buttons and checkboxes. A question like "Skill level" written in <legend> is announced by a screen reader when entering the group, so answers like "Beginner" and "Advanced" don’t hang in a vacuum.

A disabled attribute on <fieldset> disables all the fields in the group at once (except those inside its first <legend>). It’s a convenient way to lock part of a form until the user checks a required option.

Syntax

<fieldset>
  <legend>Group name</legend>
  …
</fieldset>

Attributes

disabled
boolean attribute
Disables all the fields in the group at once. Their values won’t be sent.
name
text
The group’s name, useful in JavaScript, for example form.elements.name. <fieldset> itself doesn’t send any value.

Attribute	Values	Description
disabled	boolean attribute	Disables all the fields in the group at once. Their values won’t be sent.
name	text	The group’s name, useful in JavaScript, for example `form.elements.name`. `<fieldset>` itself doesn’t send any value.

The element also supports all global attributes, such as class, id, style and hidden.

Attributes in practice

disabled

boolean attribute

Disables all the fields in the group at once. Their values won’t be sent.

HTML

<fieldset disabled>
  <legend>Billing details</legend>
  <p><label>Tax ID <input type="text" name="taxId"></label></p>
  <p><label>Company name <input type="text" name="company"></label></p>
</fieldset>

Preview

Default CSS

Most browsers display this element with these default styles:

CSS

fieldset {
  display: block;
  margin-inline: 2px;
  border: 2px groove ThreeDFace;
  padding-block: 0.35em 0.625em;
  padding-inline: 0.75em;
  min-inline-size: min-content;
}

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

The default min-inline-size: min-content makes <fieldset> reluctant to shrink, for example in a grid on a phone. min-inline-size: 0 helps with that.
You can remove the border with border: 0, but keep the group and the <legend> itself. The semantics work independently of the appearance.
Don’t wrap a single field in <fieldset>. A group makes sense for several related fields.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice HTML in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course