Switch
You might say
Make this work like a phone setting: flip it on, then flip it off again.
Turn a setting on or off immediatelyA switch shows whether a feature is currently on or off, such as dark mode or autosave. The change should take effect and show feedback right away. If several settings are saved together at the end, use Checkbox controls with a save button.
Also calledToggle
Anatomy
Auto-save
A gray background means off; the brand color means on
The thumb position indicates the state and moves with a transition
Write down what is being controlled
Variants
On
When the feature is on
Off
When the feature is off
With Label
Auto-save
In the settings page, explain what this switch controls.
Disabled
When the switch is temporarily unavailable
Typical use cases
Appearance setting
Message notification
📩 New message notificationAlert me when I receive a private message or comment
🔔 Sound reminderPlay a sound when a new message arrives
🌙 Do Not Disturb Mode23:00 – 8:00 No more reminders
Notification setting
Appearance
🌙 Dark modeThe entire interface changes skin immediately after switching
Light color
Dark ✓
Privacy setting
📝 July Product Planning (Draft)
Auto-save
Auto-saved at 15:32 · Save to the cloud every 30 seconds after turning on
Feature toggle
Lab Beta
🤖 AI summaryAutomatically generate summaries for long documents, gradually opening
🪄 Smart typesettingOrganize the paragraph level with one click, only visible to 10% of users
The experimental function may be unstable and can be closed at any time if you encounter problems
Further reading