Fieldset

Fieldsets are a set of form controls optionally grouped under the same name. The name of the group is given by the first legend element that is a child of the fieldset. The remainder of the descendants form the group.

Code & Variants

Fieldsets

<fieldset class="{labels}">
    <legend></legend>
</fieldset>
Fieldset demo
Choose a number

It is also possible to nest fieldset elements within other fieldset elements.

Classes

To implement a style other than the default, add the class in question to the bracketed part of the code snippet.

{labels}

Class Description
Default (no class) The fieldset is outlined in a light border by default, with a visible legend on the top line. Form content is outlined by the fieldset.
.semantic The semantic fieldset displays its legend more like a heading.
.sr-only While legends are optional in HTML5, they are required for WCAG 2.0 compliance. If a legend is not needed visually, use the .sr-only class to make it exclusive to screen readers. Combining this with a .semantic fieldset will allow you to use fieldsets with no visual representation, which is appropriate in many cases.

Developer Notes

Avoid wrapping a long series of fields in a single fieldset, in many cases it causes issues when attempting to print the page containing the form.

Designer Notes

Nested fieldsets are supported but should be avoided if possible for easier accessibility. It may be a valid approach in some cases, however, such as organizing exceptionally complex forms.