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.
Toggle
You can say this to an AI Agent
Make New message sounds an immediate switch with no Save step. Show progress while updating, restore the previous state on failure, offer retry, and test both turning it on and off.
When to use it
- Dark modeNotificationsDark mode
- AutosaveAutosaveAutosave is on
- NotificationsAPI accessWebhook
- A setting with an immediate on or off stateExperimentalNew editor
When NOT to use it
- Use it for an action that runs onceReceive marketing emailsSubmit
- Make users press Save after an apparently immediate switchDelete all dataOne switch deletes all your data?
- Label it with an action instead of the settingPublicMembers onlyPrivate
- Use several switches for options that are mutually exclusiveI have read and agree to the Terms of Service
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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check