UI components · Form input
Switch
Also called: Toggle, Toggle switch, On/off switch
A small sliding control, like a light switch, that turns a feature on or off. It usually takes effect as soon as you flip it.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstOn the settings page, each row has the setting name and a line of gray description on the left and a switch on the right, like "Email notifications." When on, the track is dark and the knob is on the right. When off, the track is light gray and the knob is on the left. Flipping it should call the API to save right away, show a spinner on the knob while the request is in flight, and flip back with a toast error if it fails.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Switch is what you need.
Use Switch when
- Turning a feature on or off on a settings page, where the change applies immediately
- Options with only two states, like notifications, dark mode, or autoplay
- Enabling or disabling a single record in a list or table, like publishing or unpublishing a product
Pick something else when
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Putting it in a form that needs a Save click, so users flip it, think it's done, and leave without saving
- 02
Too little color difference between on and off, so you can't tell the current state
- 03
Labeling it with an action like "Turn on notifications," so users can't tell whether it's on or off right now
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A pill-shaped track and a round knob that slides left and right, usually with a setting name next to it. Some designs show on/off text inside the track.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A switch is a pill-shaped track with a round knob. Knob on the right with a filled track means on. Knob on the left with a gray track means off. It has only two states, and just like a real light switch, the setting takes effect right away with no Save button, for things like "Notifications," "Dark mode," or "Auto-renew."
The main difference from a Checkbox is when it takes effect. A switch applies immediately, while a checkbox in a form usually applies after submit. So in a form that needs a Save click, a checkbox fits better for items like "I agree." Compared with a Radio, a switch can only express on and off, not three or more choices. If toggling needs a server request, show a loading indicator on the knob, and if it fails, flip it back automatically and show an error.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-switch- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
[role="switch"].ant-switch.el-switch[class*="MuiSwitch-root"].arco-switch.t-switch.n-switch[data-slot="switch"].form-switch
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026