Ready

Toggle Switch

A toggle switch allows users to quickly switch between two opposing options. It behaves similarly to a physical switch, where a user clicks the switch to change its position.

Ready

Toggle Switch

A toggle switch allows users to quickly switch between two opposing options. It behaves similarly to a physical switch, where a user clicks the switch to change its position.

Ready

Toggle Switch

A toggle switch allows users to quickly switch between two opposing options. It behaves similarly to a physical switch, where a user clicks the switch to change its position.

Variants

Variants

Variants

  1. Default

  2. Form field

States

States

States

  1. On

  2. Off

Best Practices

Best Practices

Best Practices

1. When to use 

The toggle switch should be used to toggle a setting "on" or "off".²

2. Clear Label 

When using the toggle switch within a form field, the label should be clear and concise. ¹

3. Immediate effect 

When possible, the effects of a toggle switch should take immediate effect.¹ This most closely matches user expectations because it matches the behavior of real-world switches. If this is not possible, ensure a "Save" button is displayed prominently in the UI and work with your team to explore updating to immediate effect.

4. Don't use for actions

Toggle switches should not be used to trigger one-time actions. Buttons should be used instead.⁴

More

More

More

Related Components

Related Patterns

Additional Reading

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

© 2025 Basis Technologies
© 2025 Basis Technologies
© 2025 Basis Technologies