Labels

Always use a label to tell the user how to use each form element.

  • 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-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.1 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.

Example


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.

Example


Diagram of a form page showing the placement of the label as a H1 heading, hint text, text input, and primary button to move forward.

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

Do this:


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.