Hint text

Use clear and concise hint text to guide users as they fill out forms.

  • Content:
    @import "../../../theme/assets/styles/sass/variables-import";
    
    .ontario-hint {
        color: $ontario-greyscale-60;
        display: inline-block;
        margin: 0 0 $spacing-4 0;
        width: 100%;
    }
    
  • URL: /components/raw/hint-text/hint-text.scss
  • Filesystem Path: fractal/components/components/hint-text/hint-text.scss
  • Size: 189 Bytes
  • Content:
    .ontario-hint{color:#666;display:inline-block;margin:0 0 1rem 0;width:100%}
  • URL: /components/raw/hint-text/hint-text.css
  • Filesystem Path: fractal/components/components/hint-text/hint-text.css
  • Size: 75 Bytes

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

When to use this component

Hint text

Only use hint text when you need to:

  • explain why you are asking a certain question
    • example: “We will only email you if there’s a problem with your order”
  • provide clarifying details
    • example: “For example, A1A 1A1”
  • tell the user where to find the information you’re asking for
    • example: “Find taxes payable on line 435 of your notice of assessment”

Hint expander

A hint expander is a hint text that can be shown or hidden using a toggle. Use a hint expander when:

  • the hint text is longer than two sentences
  • you want to give the user the option to see a helpful image, such as where to find a permit number
    • remember you will also need text that explains the image
  • make sure the toggle tells the user what they’ll see before they click
    • for example, if the hint expander is an image of a circled permit number, the text should say “Where is my permit number?”

Don’t nest hint expanders, and try not to use more than one per label.


Technical specifications

Do:

  • left-align hint text
  • put hint text under the associated label
  • use a unique ID that ties the hint text to the specific input

Do not:

  • put hint text inside text inputs. This is bad practice for accessibility.
  • include photos or more than two sentences in hint text (use a hint expander instead)
  • use manual line breaks (<br> tags)

Hint text specifications (summary chart)

Component type Mobile specs Desktop specs
Hint text Text Color: #666666
Background: #FFFFFF
Font: Open Sans
Size: 16px
Line Height: 1.6
Weight: 400
Text Color: #666666
Background: #FFFFFF
Font: Open Sans
Size: 16px
Line Height: 1.6
Weight: 400
Hint expander Text Color: #1A1A1A
Background: #FFFFFF
Font: Open Sans
Size: 16px
Line Height: 1.6
Weight: 400
Text Color: #1A1A1A
Background: #FFFFFF
Font: Open Sans
Size: 16px
Line Height: 1.6
Weight: 400

Help improve this page

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