TC Design

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

Always use labels for form input elements such as radio buttons, dropdowns, checkboxes, and text inputs.

Do:

  • Always use a “for” attribute that ties the label to the specific input

  • Always specify if a response is optional or required in brackets at the end of a label

  • Left-align labels, text inputs, and hint text

Do not:

  • Put labels inside text inputs

  • Use labels for elements that aren’t form input elements, such as buttons

Technical specifications

  • Font size: 18px

  • Space between label and input: 16px

  • Space between previous input and next label: 40px

    • Note that you can adjust the spacing between elements but make sure the elements align to an 8-pixel grid

Example

References and resources

  1. Ontario Design System - Labels

  • No labels