Switch

Interactive control that enables users to switch between two states, such as on/off or active/inactive

When to use a switch

  • You want a user to be able to turn something on or off
  • To allow users to activate or deactivate something instantly

Switches excel in scenarios where users need to make quick selections or control individual items independently such as updating preferences or settings. Behaviorally, they provide immediate results, mirroring real-world counterparts like light switches.

 

 

Behavior

Instant feedback

Switches should always give instant feedback when users toggle them, showing the change in state right away without needing users to save or submit. This quick response helps users feel in control and makes their interaction with the interface smoother and more enjoyable.

 


Best practices

Use clear language

Make sure the label clearly describes what action or setting they'll control when switched on. Avoid using neutral or unclear language. A helpful trick is to say the label aloud and add "on/off" to the end. If it doesn't sound clear or intuitive, rewrite the label accordingly. This ensures users understand the function of the toggle at a glance and helps create a more user-friendly interface.

 

Don’t overuse them

Be mindful of how often you use switches in your interface and avoid cluttering it with unnecessary toggles. Only include them where they truly enhance the user experience and provide clear value. This ensures that users aren't overwhelmed and can easily navigate and interact with your interface in a positive way.

 

Default state

Consider setting a default state for the switch if there's a common or recommended choice. However, be cautious with default selections to ensure they align with user expectations and preferences.