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;
        width: 100%;
    
        @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;
    
        h1 {
            display: inline-block;
            font-size: inherit;
            margin: 0;
        }
    
        @media screen and (max-width: $small-breakpoint) {
            font-size: 1.4375rem;
            line-height: 1.39;
        }
    }
    
    .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/labels/labels.scss
  • Size: 941 Bytes
  • Content:
    .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;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}.ontario-label--large h1{display:inline-block;font-size:inherit;margin:0}@media screen and (max-width: 40em){.ontario-label--large{font-size:1.4375rem;line-height:1.39}}.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/labels/labels.css
  • Size: 735 Bytes

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.

Technical specifications

Using labels as headings

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 as an h1
  • use “large label” formatting

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

Help improve this page

If you have suggestions, advice or any questions about labels the design system team would love to hear from you.