Specifications
- A switch must have a visible label that clearly conveys what option a user will turn on or off.
Type
| Example
| Height
|
Default
| ![](/img/in-field/switches-spec.svg)
| 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](/img/in-field/switches-on-default.svg)
| ![Example of Default Switch](/img/in-field/switches-off-default.svg)
|
Focus
| ![Example of Default Switch](/img/in-field/switches-on-focus.svg)
| ![Example of Default Switch](/img/in-field/switches-off-focus.svg)
|
Disabled
| ![Example of Default Switch](/img/in-field/switches-on-disabled.svg)
| ![Example of Default Switch](/img/in-field/switches-off-disabled.svg)
|
Labels & Icons
Label Left
| Label right
| Icon Right
| Icon Left
| Check icon
|
![](/img/in-field/switch-label-left.svg)
| ![](/img/in-field/switch-label-right.svg)
| ![](/img/in-field/switch-icon-left.svg)
| ![](/img/in-field/switch-icon-right.svg)
| ![](/img/in-field/switch-tick.svg)
|
OEM Branding
- This can be branded for OEMs as primary or brand colors.
![OEM Branding](/img/in-field/switches-oem.svg)
Editorial
- Avoid acronyms.
- Use 2-5 words.
- Use the same label text for on and off states.