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
| 
| 
|
Focus
| 
| 
|
Disabled
| 
| 
|
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.

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