- Guidelines
- React API Reference
- Blazor API Reference
Switches provide a way for users to toggle between two states (on/off, enabled/disabled) with immediate effect, offering clear visual feedback for binary choices and settings.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use for binary states that take effect immediately. Ideal for enabling/disabling features, settings, or preferences that don’t require confirmation. |
| Content | Use clear, descriptive labels that indicate what will happen when the switch is toggled. Avoid ambiguous language. |
| Behavior | Changes should take effect immediately without requiring additional confirmation. Provide clear visual feedback for state changes. |
| States | Clearly distinguish between on/off states with color, position, and other visual indicators. Include disabled and focused states. |
| Feedback | Use smooth animations for state transitions. Provide immediate visual confirmation of the current state. |
| Examples | Feature toggles, notification settings, privacy controls, accessibility options, or any binary preference that applies immediately. |
Best Practices
- Immediate Effect: Switch changes should take effect immediately without requiring a save action.
- Clear Labeling: Use descriptive labels that clearly indicate what the switch controls.
- Visual Distinction: Make on/off states visually distinct through color, position, and other indicators.
- Consistent Behavior: Maintain consistent switch behavior throughout the application.
- Accessible Design: Ensure switches work with keyboard navigation and screen readers.
- Appropriate Usage: Use switches for settings that apply immediately, not for form submissions.
Do’s and Don’ts
Do
- Use for binary choices that take effect immediately.
- Provide clear labels indicating what the switch controls.
- Show the current state clearly with visual indicators.
- Include smooth transitions between states.
Don't
- Use for actions that require confirmation or have significant consequences.
- Use ambiguous labels that don’t clearly indicate the switch’s purpose.
- Make switches too small for easy interaction on touch devices.
- Use switches for form fields that require explicit submission.
Additional Guidance
- Psychological Impact:
- Immediate Control: Switches give users a sense of direct, immediate control over settings and features.
- Clear State Awareness: Visual state indicators help users understand current settings at a glance.
- Confident Interaction: The physical metaphor of a toggle switch makes the interaction feel familiar and predictable.