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.
Was this page helpful?
Thanks for your feedback!