TC Design

Labels

Owned by Dan Larmour
Last updated: Jul 04, 2024
1 min read

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

For a Search input, the field does not require a visible label i.e. Search, but does required a “for” attribute for users using assistive technology.

Best practices

Do:

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

  • All form elements must include a label with matching ID

  • 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

TC Design