Fieldsets

Skip to main guidance


        
        <div class="ontario-form-group">
    <fieldset class="ontario-fieldset">
        <legend class="ontario-fieldset__legend ontario-fieldset__legend--large">
            What is your delivery address?
        </legend>
        <label class="ontario-label" for="address-line-1">
            Address line 1<span class="ontario-label__flag">(required)</span>
        </label>
        <p id="address-line-1-hint" class="ontario-hint">Street and number or P.O. box.</p>
        <input required aria-describedby="address-line-1-hint" class="ontario-input" type="text" id="address-line-1">
        <label class="ontario-label" for="address-line-2">
            Address line 2<span class="ontario-label__flag">(optional)</span>
        </label>
        <p id="address-line-2-hint" class="ontario-hint">Apartment, suite, unit, building, etc.</p>
        <input aria-describedby="address-line-2-hint" class="ontario-input" type="text" id="address-line-2">
        <label class="ontario-label" for="city-town">
            City/town<span class="ontario-label__flag">(required)</span>
        </label>
        <input required class="ontario-input" type="text" id="city-town">
        <label class="ontario-label" for="province">
            Province<span class="ontario-label__flag">(required)</span>
        </label>
        <select required class="ontario-input ontario-dropdown" id="province" name="province">
            <option value="">Select</option>
            <option value="AB">Alberta</option>
            <option value="BC">British Columbia</option>
            <option value="MB">Manitoba</option>
            <option value="NB">New Brunswick</option>
            <option value="NL">Newfoundland and Labrador</option>
            <option value="NS">Nova Scotia</option>
            <option value="ON">Ontario</option>
            <option value="PE">Prince Edward Island</option>
            <option value="QC">Quebec</option>
            <option value="SK">Saskatchewan</option>
            <option value="NT">Northwest Territories</option>
            <option value="NU">Nunavut</option>
            <option value="YT">Yukon</option>
        </select>
        <label class="ontario-label" for="postal-code">
            Postal code<span class="ontario-label__flag">(required)</span>
        </label>
        <input required class="ontario-input ontario-input--7-char-width" type="text" id="postal-code">
    </fieldset>
</div>

Content:


                                @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;

.ontario-fieldset__legend {
	color: colours.$ontario-colour-black;
	font-family: typography.$ontario-font-raleway-modified;
	font-size: 1.1875rem;
	font-weight: fontWeights.$ontario-font-weights-bold;
	line-height: lineheight.$ontario-line-height-7;
	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;
	max-width: 38.75em;
	white-space: normal;
	width: globalVariables.$full-width;

	@media screen and (max-width: breakpoints.$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.$spacing-4;

	h1 {
		@extend %h1-styles;
		display: inline-block;
		margin: spacing.$spacing-0;
	}

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		font-size: 1.4375rem;
		line-height: 1.39;
	}
}

.ontario-fieldset__legend__flag {
	font-family: typography.$ontario-font-open-sans;
	font-size: fontSizes.$ontario-font-size-standard-body-text;
	font-weight: fontWeights.$ontario-font-weights-normal;

	&:before {
		content: '\a0';
	}
}

URL: /components/raw/fieldsets/fieldsets.scss
Filesystem Path: fractal/components/components/form/fieldsets/fieldsets.scss
Size: 2.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;max-width:70rem}@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{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>.

HTML code

<fieldset class="ontario-fieldset">
    <legend class="ontario-fieldset__legend ontario-fieldset__legend--heading">
        <h1>How would you like to 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

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