Switches

Switches are used to toggle functionality.

Specifications

  • A switch must have a visible label that clearly conveys what option a user will turn on or off.
TypeExampleHeight
Default

48dp

Note: In-cab size only. See mobile patterns (coming soon) for smaller options if required.

Behaviors

All checkboxes should have the following states:

  • Active
  • Active Focus
  • Active Disabled
  • Default
  • Default Focus
  • Default Disabled

Switch Progression

StateOnOff
Default

Example of Default Switch

Example of Default Switch

Focus

Example of Default Switch

Example of Default Switch

Disabled

Example of Default Switch

Example of Default Switch

Labels & Icons

Label LeftLabel rightIcon RightIcon LeftCheck icon

OEM Branding

  • This can be branded for OEMs as primary or brand colors.

OEM Branding

Editorial

  • Avoid acronyms.
  • Use 2-5 words.
  • Use the same label text for on and off states.