Toggle

When to use this component

Use toggles when:

• Users need to switch between two opposing states
• The change takes immediate effect without requiring confirmation
• The setting represents a binary option that is either enabled or disabled
• Users need to see the current state at a glance

Use checkboxes or radio buttons instead for options that don’t take effect immediately.

How to use this component

• Provide clear labels that describe what the toggle controls
• Ensure toggles always have a default value
• Make the toggle give immediate feedback when activated
• Use consistent toggle direction (right/on, left/off)
• Ensure the two states are visually distinct
• Use toggles only for settings that apply immediately
• Consider adding descriptive text for both states when necessary