Web/HTML/Element/fieldset

The HTML <fieldset> element is used to group several controls as well as labels (<label>) within a web form.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

As the example above shows, the <fieldset> element provides a grouping for a part of an HTML form, with a nested <legend> element providing a caption for the <fieldset>. It takes few attributes, the most notable of which are form, which can contain the id of a <form> on the same page, allowing you to make the <fieldset> part of that <form> even if it is not nested inside it, and disabled, which allows you to disable the <fieldset> and all its contents in one go.

Attributes

This element includes the global attributes.

disabled: If this Boolean attribute is set, all form controls that are descendants of the <fieldset>, are disabled, meaning they are not editable and won't be submitted along with the <form>. They won't receive any browsing events, like mouse clicks or focus-related events. By default browsers display such controls grayed out. Note that form elements inside the <legend> element won't be disabled.
form: This attribute takes the value of the id attribute of a <form> element you want the <fieldset> to be part of, even if it is not inside the form. Please note that usage of this is confusing — if you want the <input> elements inside the <fieldset> to be associated with the form, you need to use the form attribute directly on those elements. You can check which elements are associated with a form via JavaScript, using HTMLFormElement.elements.
name: The name associated with the group.

Note: The caption for the fieldset is given by the first <legend> element nested inside it.

Styling with CSS

There are several special styling considerations for <fieldset>.

Its display value is block by default, and it establishes a block formatting context. If the <fieldset> is styled with an inline-level display value, it will behave as inline-block, otherwise it will behave as block. By default there is a 2px groove border surrounding the contents, and a small amount of default padding. The element has min-inline-size: min-content by default.

If a <legend> is present, it is placed over the block-start border. The <legend> shrink-wraps, and also establishes a formatting context. The display value is blockified. (For example, display: inline behaves as block.)

There will be an anonymous box holding the contents of the <fieldset>, which inherits certain properties from the <fieldset>. If the <fieldset> is styled with display: grid or display: inline-grid, then the anonymous box will be a grid formatting context. If the <fieldset> is styled with display: flex or display: inline-flex, then the anonymous box will be a flex formatting context. Otherwise, it establishes a block formatting context.

You can feel free to style the <fieldset> and <legend> in any way you want to suit your page design.

Examples

Simple fieldset

This example shows a really simple <fieldset> example, with a <legend>, and a single control inside it.

<form action="#">
  <fieldset>
    <legend>Simple fieldset</legend>
    <input type="radio" id="radio">
    <label for="radio">Spirit of radio</label>
  </fieldset>
</form>

Disabled fieldset

This example shows a disabled <fieldset> with two controls inside it. Note how both the controls are disabled due to being inside a disabled <fieldset>.

<form action="#">
  <fieldset disabled>
    <legend>Disabled fieldset</legend>
    <div>
      <label for="name">Name: </label>
      <input type="text" id="name" value="Chris">
    </div>
    <div>
      <label for="pwd">Archetype: </label>
      <input type="password" id="pwd" value="Wookie">
    </div>
  </fieldset>
</form>

Technical summary

Content categories	Flow content, sectioning root, listed, form-associated element, palpable content.
Permitted content	An optional `<legend>` element, followed by flow content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts flow content.
Implicit ARIA role	`group`
Permitted ARIA roles	`radiogroup`, `presentation`, `none`
DOM interface	`HTMLFieldSetElement`

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of '<fieldset>' in that specification.	Living Standard	Definition of the `fieldset` element
HTML5The definition of '<fieldset>' in that specification.	Recommendation
HTML 4.01 SpecificationThe definition of '<fieldset>' in that specification.	Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`fieldset`	Chrome Full support Yes Notes' Full support Yes Notes' Notes' Does not support `flexbox` and `grid` layouts within this element. See bug 262679.	Edge Full support 12 Notes' Full support 12 Notes' Notes' Does not support `flexbox` and `grid` layouts within this element. See bug 4511145.	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes Notes' Full support Yes Notes' Notes' Does not support `flexbox` and `grid` layouts within this element. See bug 262679.	Safari Full support Yes	WebView Android Full support Yes Notes' Full support Yes Notes' Notes' Does not support `flexbox` and `grid` layouts within this element. See bug 262679.	Chrome Android Full support Yes Notes' Full support Yes Notes' Notes' Does not support `flexbox` and `grid` layouts within this element. See bug 262679.	Firefox Android Full support Yes	Opera Android Full support Yes Notes' Full support Yes Notes' Notes' Does not support `flexbox` and `grid` layouts within this element. See bug 262679.	Safari iOS Full support Yes	Samsung Internet Android Full support Yes Notes' Full support Yes Notes' Notes' Does not support `flexbox` and `grid` layouts within this element. See bug 262679.
`disabled`	Chrome Full support Yes	Edge Partial support 12 Notes' Partial support 12 Notes' Notes' Does not work with nested fieldsets. For example: `<fieldset disabled><fieldset><!--Still enabled--></fieldset></fieldset>`	Firefox Full support Yes	IE Full support Yes Notes' Full support Yes Notes' Notes' Not all form control descendants of a disabled fieldset are properly disabled in IE11; see IE bug 817488: input[type='file' not disabled inside disabled fieldset] and IE bug 962368: Can still edit input[type='text' within fieldset[disabled]].	Opera Full support 12	Safari Full support 6	WebView Android Full support 4.4	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android ?	Safari iOS Full support 6	Samsung Internet Android Full support Yes
`form`	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`name`	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support: Full support
Partial support: Partial support
Compatibility unknown: Compatibility unknown
See implementation notes.': See implementation notes.