Switch Component

Overview

Switch adds tactile feedback to a standard toggle. The Elastic mode compresses the handle on press, while the Apple mode widens it and lets users drag it between on and off, both settling with a controlled spring. Optional I/O marks add an extra state cue.

Use it for settings that switch on or off immediately, such as notifications, Wi-Fi, auto-updates, and privacy options. The animation should make the control feel responsive, never delay or hide the result.

Theme and Interaction Customisation

Adjust size, roundness, label position, and on-state colour, including semantic success, info, warning, and destructive colours, or an iOS-style green in Apple mode. Interaction settings cover Elastic or Apple mode, press squeeze, duration, and spring bounce.

Example Production Use Case

A SaaS settings page can list notification sounds, auto-updates, and sync options, each with a short description and an Elastic switch that applies the change instantly and reverts if the save fails.

A mobile connectivity panel can use the Apple variant for Wi-Fi and Bluetooth, so users tap or drag the handle just as they would on their phone.

A smart-home dashboard can use larger switches with I/O marks for lights and devices, making each state readable at a glance from across the room.

Best Used For

• Application settings like auto-updates and sync.
• Notification preferences.
• Connectivity controls such as Wi-Fi and Bluetooth.
• Privacy settings.
• SaaS workspace feature toggles.
• Mobile apps with draggable switches.
• Smart-device controls.

Not For

For one choice among several, use Radio, and for multiple independent form options, use Checkbox.

Actions that need review, like deleting an account or making a payment, shouldn’t happen through a toggle.

If changes only apply after a form is submitted, a checkbox describes that better. An unfamiliar setting always needs a clear label, not just motion and colour.

Performance Budget

Update state immediately and keep handle movement light. Keep press effects short, avoid app-wide updates on every drag event, and always settle on a valid value when a gesture is released or interrupted.

Accessibility and Mobile

Use switch semantics with a stable label, accurate on/off state, Space to toggle, and visible focus. On mobile, give it a comfortable tap target and stop dragging from fighting page scroll, with I/O marks only supplementing real state information. With reduced motion, remove compression, widening, and bounce.

Common Mistakes

• Using a switch for multi-option decisions.
• Letting the visual state drift from the real setting.
• Letting press feedback change the setting on its own.
• Leaving interrupted gestures in an invalid state.
• Using excessive bounce.
• Expecting Apple green without the Apple variant and foreground colour.
• Showing success when a server update failed.
• Relying only on colour to show state.
• Ignoring reduced-motion preferences.