Labels

Skip to main guidance


        
        
            <!-- Default -->
<div class="ontario-form-group">
    <label class="ontario-label " for="label-example">
        Label<span class="ontario-label__flag">(required/optional)</span>
    </label>
    <input class="ontario-input" type="text" id="label-example">
</div>


        
            <!-- Large label -->
<div class="ontario-form-group">
    <label class="ontario-label ontario-label--large" for="large-label-example">
        Label<span class="ontario-label__flag">(required/optional)</span>
    </label>
    <input class="ontario-input" type="text" id="large-label-example">
</div>


        
            <!-- Labels as page headings -->
<div class="ontario-form-group">
    <h1 class="ontario-label">
        <label class="ontario-label ontario-label--heading" for="heading-label-example">
            Heading label<span class="ontario-label__flag">(required/optional)</span>
        </label>
    </h1>
    <input class="ontario-input" type="text" id="heading-label-example">
</div>

Content:


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

.ontario-label {
	cursor: pointer;
	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: lineheight.$ontario-line-height-8;
	}
}

.ontario-label--large {
	font-size: 1.75rem;
	letter-spacing: 0.02rem;
	line-height: lineheight.$ontario-line-height-1;
	max-width: 26.25em;

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

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

.ontario-label__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/labels/labels.scss
Filesystem Path: fractal/components/components/form/labels/labels.scss
Size: 2.3 KB

Content:


                                h1 .ontario-label--heading{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}h1 .ontario-label--heading{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){h1 .ontario-label--heading{font-size:2.5rem;letter-spacing:.04rem;line-height:1.2}}.ontario-label{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-label{font-size:1.125rem;line-height:1.56}}.ontario-label--large{font-size:1.75rem;letter-spacing:.02rem;line-height:1.2;max-width:26.25em}@media screen and (max-width: 40em){.ontario-label--large{font-size:1.4375rem;line-height:1.39}}h1 .ontario-label--heading{display:inline-block;margin:0}.ontario-label__flag{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}

URL: /components/raw/labels/labels.css
Filesystem Path: fractal/components/components/form/labels/labels.css
Size: 1.2 KB

Guiding principle: Help the user be successful the first time.

When to use this component

Always use labels for form input elements such as:

Links don’t need labels, whether they are styled as buttons, icons or regular links.

Label: licence plate number (required). Hint text: for example, AAAA111. Empty text input field.

Label as a heading

If there is only one form element on the page (for example, the only thing on a page is a label asking for the user’s licence plate number and a text input), make the label the page heading by including it inside the h1.

HTML code

<h1 class="ontario-label">
    <label class="ontario-label ontario-label--heading" for="licence-plate-number"> Enter your licence plate number<span class="ontario-label__flag">(required)</span> </label>
</h1>

Best practices

Do:

left-align labels, text inputs and hint text
always use a “for” attribute that ties the label to the specific input - it’s an accessibility requirement
ensure labels are located close to their associated field
use large-label formatting if a particular form element label needs to be visually distinguished on a page with multiple form elements — see fieldsets for more information
always specify if a response is optional or required in brackets at the end of the label
- add (required) next to questions that the user must answer to move on
- add (optional) next to questions that the user does not have to answer to move on

Provide your contact information section. Name (required), email address (required) and phone number (optional), with three empty text input fields under each label.

Do not:

use labels for interactive elements that aren’t form input elements (such as buttons)
put labels inside text inputs. This is bad practice for accessibility.

Label specifications (summary chart)

Component type	Mobile specs	Desktop specs
Standard label	Text Color: `#1A1A1A` Background: `#FFFFFF` Font: `Raleway Modified` Size: `18px` Line Height: `1.56` Weight: `700` Spacing: `0.03rem`	Text Color: `#1A1A1A` Background: `#FFFFFF` Font: `Raleway Modified` Size: `19px` Line Height: `1.5` Weight: `700` Spacing: `0.025rem`
Large label	Text Color: `#1A1A1A` Background: `#FFFFFF` Font: `Raleway Modified` Size: `23px` Line Height: `1.39` Weight: `700` Spacing: `0.02rem`	Text Color: `#1A1A1A` Background: `#FFFFFF` Font: `Raleway Modified` Size: `28px` Line Height: `1.43` Weight: `700` Spacing: `0.02rem`

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