Toggle

When to use

• User Preferences: Utilize toggle switches for settings that can be turned on or off, reflecting user preferences without needing to navigate away from the current page.
• Immediate Activation: Implement toggles when the setting changes should apply immediately without any additional confirmation steps.

When not to use

• Complex Settings: Avoid toggles for settings that require more than a simple on/off state, such as dropdowns that offer multiple options.
• Critical Actions: Do not use toggles for actions that have significant consequences and require more deliberate confirmation, such as deleting an account.

Behaviors

• Mouse Interaction: Toggle switches should visibly respond to mouse clicks, indicating their state change from on to off or vice versa.
• Keyboard Navigation: Toggles should be accessible through the keyboard, allowing users to switch them using the Tab key for focus and the Enter or Space key to activate.
• Screen Reader Accessibility: Structure toggle elements with clear labels and use ARIA attributes to communicate the state and purpose of the toggle switch to screen readers.

Content

• Clear State Indication: Use visual cues like color contrast or text to clearly indicate the state of the toggle, ensuring users understand whether the option is enabled or disabled.
• Concise Labeling: Labels for toggles should be short and precise, informing users about the functionality of the switch.
• Immediate Feedback: Provide instant feedback upon state change so users know the action has been successfully performed.
• Avoid Ambiguity: Ensure that the purpose and consequences of the toggle are clear, avoiding any confusion about what the switch controls.