Fieldsets

Use the fieldset element to group related form elements.

  • Content:
    @import '../../../../theme/assets/styles/sass/variables-import';
    
    .ontario-fieldset__legend {
    	cursor: pointer;
    	color: $ontario-colour-black;
    	font-family: $ontario-font-raleway-modified;
    	font-size: 1.1875rem;
    	font-weight: $ontario-font-weight-bold;
    	line-height: 1.5;
    	margin: 0 0 $spacing-4 0;
    	max-width: 38.75em;
    	white-space: normal;
    	width: $full-width;
    
    	@media screen and (max-width: $small-breakpoint) {
    		font-size: 1.125rem;
    		line-height: 1.56;
    	}
    }
    
    .ontario-fieldset__legend--large,
    .ontario-fieldset__legend--heading {
    	font-size: 1.75rem;
    	letter-spacing: 0.02rem;
    	line-height: 1.2;
    	max-width: 26.25em;
    	margin-top: $spacing-4;
    
    	h1 {
    		@extend %h1-styles;
    		display: inline-block;
    		margin: $spacing-0;
    	}
    
    	@media screen and (max-width: $small-breakpoint) {
    		font-size: 1.4375rem;
    		line-height: 1.39;
    	}
    }
    
    .ontario-fieldset__legend__flag {
    	font-family: $ontario-font-open-sans;
    	font-size: 1rem;
    	font-weight: $ontario-font-weight-normal;
    
    	&:before {
    		content: '\a0';
    	}
    }
    
  • URL: /components/raw/fieldsets/fieldsets.scss
  • Filesystem Path: fractal/components/components/form/fieldsets/fieldsets.scss
  • Size: 1 KB
  • Content:
    .ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{font-size:2rem;letter-spacing:.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0}@media screen and (min-width: 40em){.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{font-size:2.5rem;letter-spacing:.04rem;line-height:1.2}}.ontario-fieldset__legend{cursor:pointer;color:#1a1a1a;font-family:"Raleway","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.1875rem;font-weight:700;line-height:1.5;margin:0 0 1rem 0;max-width:38.75em;white-space:normal;width:100%}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.75rem;letter-spacing:.02rem;line-height:1.2;max-width:26.25em;margin-top:1rem}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend__flag{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend__flag:before{content:" "}
  • URL: /components/raw/fieldsets/fieldsets.css
  • Filesystem Path: fractal/components/components/form/fieldsets/fieldsets.css
  • Size: 1.5 KB

When to use this component

Use the fieldset component when you need to show a relationship between multiple form inputs.

The fieldset component consists of a:

  • legend element, which provides a caption or description for the group of related form inputs
  • fieldset element, where the group of related form inputs are contained

When used correctly, the <fieldset> and <legend> elements tie related form inputs together in a way that is accessible to people who cannot see the visual layout of the form.

Mandatory use

If you’re using radio buttons or multiple checkboxes components, it’s mandatory to include a fieldset to show they are related.

For other components, it’s not mandatory to use a fieldset.

In general, use a fieldset to group thematically related inputs whenever it feels meaningful to you and your users.


Legends

The legend element provides a caption or description for the fieldset (group of related inputs).

The first element inside a fieldset component must be a legend. This could be either:

  • a question like “What is your delivery address?”
  • a statement like “Contact information”

Styling

By default, the fieldset is unstyled and the legend follows the same styling rules as labels.

You may optionally add the large label class to the legend to give your fieldset groups more prominence.

Diagram of a form page showing a large legend and two text inputs grouped into a fieldset.

Legend as the H1

If there is only one form element on the page (for example, the only thing on a page is a group of radio buttons), make the group legend the page heading by including an <h1> tag inside the <legend>.

Diagram of a form page showing the placement of the legend as an H1 heading, three radio buttons, and a primary button to move forward.

HTML code

<fieldset class="ontario-fieldset">
    <legend class="ontario-fieldset__legend ontario-fieldset__legend--heading">
        <h1>
            How would you like ​t​o​ be contacted?<span class="ontario-label__flag">(required)</span>
        </h1>
    </legend>
</fieldset>

Best practices

Do

  • use a legend as the first element inside a fieldset
  • try to avoid nesting fieldsets as they can cause odd screen reader behaviour

Don’t

  • use a fieldset if there is only one form input and a single piece of information being asked
  • use a fieldset or legend for a single checkbox that make sense from its label

Contact us

If you have any questions or feedback, please get in touch.