<fieldset> Field set
Groups related form controls and names them with a legend.
<fieldset> groups form controls that belong together, like the parts of an address or a set of radio buttons. Make a <legend> its first child to name the group.
Screen readers announce the legend with each control. For radio buttons and checkboxes, that is the only thing keeping the question attached to the options. Put disabled on the fieldset and every control inside is disabled at once.
How disabled affects the controls inside is explained in the fieldset element in the HTML Living Standard (opens in a new tab). Practise in the Buttons and Fieldsets lesson.
Syntax
<fieldset>
<legend>Group name</legend>
<label><input type="radio" name="group" value="1"> One</label>
<label><input type="radio" name="group" value="2"> Two</label>
</fieldset>When to use it
A <fieldset> groups controls that answer one question or describe one thing. Radio buttons for a payment method, checkboxes for dietary needs, the street, city and postcode of a billing address and a single step of a long checkout are typical. Its legend names the group, which gives each control context it would not have on its own.
A lone text field needs no fieldset, since its label says it all. Nor is fieldset a way to draw a box. It announces a named group to assistive technology, so for a plain border, use a div and CSS. Big sections of a page are better structured with headings.
Fieldsets have an odd layout default: their minimum width equals their content. A wide table or a long unbroken line inside will push the fieldset past the edge of a narrow phone screen. Give it min-width:0 and it shrinks like any other box. You can practise grouping in the Buttons and Fieldsets lesson.
Attributes
| Attribute | What it does |
|---|---|
disabled | Disables all controls inside. |
name | Name of the group. |
form | Id of the form it belongs to. |
Live example
Edit the code and watch the preview.
<fieldset>
<legend>Delivery</legend>
<label><input type="radio" name="delivery" value="standard" checked> Standard</label>
<label><input type="radio" name="delivery" value="express"> Express</label>
</fieldset>More examples
Billing address
An address is one thing in several parts, so the parts share a fieldset called Billing address. Screen readers announce that name when users move into the group. If the form also asks for a delivery address with identical field names, users can still tell the two apart.
<form>
<fieldset>
<legend>Billing address</legend>
<label for="street">Street</label>
<input id="street" name="street" autocomplete="street-address">
<label for="city">City</label>
<input id="city" name="city" autocomplete="address-level2">
<label for="zip">Postcode</label>
<input id="zip" name="zip" autocomplete="postal-code">
</fieldset>
<button>Continue</button>
</form>Date of birth in three fields
Split a date into day, month and year and each label shrinks to one word. The fieldset and its legend are what tell users that the three fields add up to a date of birth.
<form>
<fieldset>
<legend>Date of birth</legend>
<label for="d">Day</label>
<input type="text" id="d" name="day" inputmode="numeric" size="2" autocomplete="bday-day">
<label for="m">Month</label>
<input type="text" id="m" name="month" inputmode="numeric" size="2" autocomplete="bday-month">
<label for="y">Year</label>
<input type="text" id="y" name="year" inputmode="numeric" size="4" autocomplete="bday-year">
</fieldset>
<button>Next</button>
</form>Tip: Each radio group goes in a fieldset with a legend.
Browser support
fieldset is supported in every browser and defined in the HTML Living Standard. Flex and grid layouts on a fieldset used to break in older browser versions; current ones handle them fine. All current browsers support the disabled attribute, which switches off every control inside in one go.
Accessibility
Put radio and checkbox groups in a fieldset with a legend, and the group question is announced with every option (WCAG 1.3.1). The W3C tutorial on grouping controls (opens in a new tab) shows how.
Common mistakes
Wrong
<p>Size</p>
<input type="radio" id="s" name="size"><label for="s">Small</label>Right
<fieldset>
<legend>Size</legend>
<input type="radio" id="s" name="size"><label for="s">Small</label>
</fieldset>A paragraph has no tie to the radio group. The legend is what names it.
Frequently asked questions
When should I use fieldset in a form?
Whenever several controls answer one question. Radio buttons and checkboxes are the main case, such as Delivery method with three options, and a section like Billing address works too. Wrap them in <fieldset> with a <legend>. Screen readers then read the legend with each control, so users know what the options refer to.
Can I disable a whole fieldset?
Yes. Putting disabled on a <fieldset> disables every form control inside it, except those inside its first <legend>. Disabled controls cannot be focused and are not submitted. This comes in handy for a section that applies only after the user makes some other choice.
Practise it
- Buttons and Fieldsets (Module 6: Forms)
- Project: Sign-up Form (Module 6: Forms)
- Contact Page with Form (Module 10: Final Projects)