Labels

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

  • Content:
    @import "../../../../theme/assets/styles/sass/variables-import";
    
    .ontario-label {
        cursor: pointer;
        color: $ontario-colour-black;
        font-family: $ontario-font-raleway-modified;
        font-size: 1.1875rem;
        font-weight: 700;
        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-label--large {
        font-size: 1.75rem;
        letter-spacing: 0.02rem;
        line-height: 1.2;
        max-width: 26.25em;
    
        @media screen and (max-width: $small-breakpoint) {
            font-size: 1.4375rem;
            line-height: 1.39;
        }
    }
    
    h1{
        .ontario-label--heading {
            @extend %h1-styles;
            display: inline-block;
            margin: $spacing-0;
            
        }
    }
    
    .ontario-label__flag {
        font-family: $ontario-font-open-sans;
        font-size: 1rem;
        font-weight: 400;
    
        &:before {
            content: "\a0";
        }
    }
    
  • URL: /components/raw/labels/labels.scss
  • Filesystem Path: fractal/components/components/form/labels/labels.scss
  • Size: 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.2;margin:2.5rem 0 1.5rem 0}@media screen and (min-width: 40em){h1 .ontario-label--heading{font-size:2.5rem;letter-spacing:.04rem;line-height:1.29}}.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

Contact us

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