Skip to main content

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.
Type Example Height
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

State On Off
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 Left Label right Icon Right Icon Left Check 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.
Last updated November 14, 2023.