A toggle represents a physical switch that allows someone to choose between two mutually exclusive options. For example, "On/Off", "Show/Hide". Choosing an option should produce an immediate result.
Best Practices
Layout
- When people need to perform extra steps for changes to take effect, use a check box instead. For example, if they must click "Submit", "Next", or "OK" button to apply changes, use a check box.
Content
- Only replace the On/Off labels if there are more specific labels for the setting. For example, you might use Show/Hide if the setting is "Show images".
- Keep descriptive text short and concise - two to four words; preferably nouns. For example, "Focused inbox" or "Wi-Fi".
Toggle Button Design (without Text)
States
Transitions
| Transitions | Front View | Isometric View |
|---|
| Appear | - | - |
| Enter | - | - |
| Exit | - | - |
| Interact | - | - |
| Disappear | - | - |
Toggle Button Design (with Text)
States
Transitions
| Transitions | Front View | Isometric View |
|---|
| Appear | - | - |
| Enter | - | - |
| Exit | - | - |
| Interact | - | - |
| Disappear | - | - |