Switch
开关
A control that slides left and right, on or off, with the state always plainly visible.
Live Demo
Actually clickableWhat you just saw:The slider at the right end of a "Dark mode" or "Notifications" row in Settings, every green rounded switch in iOS Settings, the "Autoplay video" toggle in an app preferences screen.
What it actually is
A switch communicates whether a feature is currently on. The difference from a checkbox is a difference in tense: a checkbox says "you ticked this action", a switch says "this state is on". A checkbox usually takes effect on submit; a switch takes effect immediately.
Anatomy · What it's made of
Track轨道
40×24px, turns the primary color when on
Thumb滑块
A 20px circle that lifts with a shadow while dragging
Label文字
Describes the feature, not the state
State Label状态文字
Optional, reads "On / Off"
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| A feature is on or off and the change takes effect immediately | Yes |
| The current state must be visible at a glance | Yes |
| The state itself carries meaning (on = power-saving mode) | Yes |
| The change should only take effect after confirmation | No |
| The selection has to be submitted along with a form | Depends |
A switch should not need a tooltip explaining what "on" and "off" mean — if it does, use a checkbox with explicit copy instead.
When flipping it has serious consequences (turning it off loses data), pair the switch with a confirmation or an undo.
Similar Patterns
Don't mix these upSwitchCurrent
开关
A control that slides left and right, on or off, with the state always plainly visible.
Checkbox
复选框
A small square the user can tick, for picking any number of several independent options at once.
In one line:A control that slides left and right, on or off, with the state always plainly visible.
Checkbox
复选框
A small square the user can tick, for picking any number of several independent options at once.
Radio Button
单选按钮
A row of circles where picking one clears the others — one choice, immediately visible.
Segmented Control
分段控件
A row of small buttons packed shoulder to shoulder, one of them selected, so the control looks "segmented".
How to tell AI
Three levels of promptAdd the component name and specifics
Add a settings row: the title "Dark mode" plus a line of description on the left, a switch on the right. Toggling takes effect immediately and confirms with a toast.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add something that can be turned on and off.
Say this instead
Add a Switch settings row: role="switch" + aria-checked, a 44×26px track, a 22px thumb, the change takes effect immediately with a confirmation toast, the whole row is tappable, and it does not use checkbox semantics.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.