Switch
开关
Aliases:开关拨动开关切换开关toggle 开关滑动开关开关键
What is it
A thumb sliding on a track represents a binary setting that takes effect immediately, no confirmation needed. Thumb travel and track color change together signal the state, with an on/off text hint beside or inside — the standard control of settings pages.
Interactive playground
Try it. Make an informed choice.Toggle the switch and inspect the immediate setting state.
Loading lab…
What to look for
- 01Use switches for immediate settings rather than form submission.
- 02Keep the label stable and communicate on/off state separately.
✓ When to use
- Binary settings that apply immediately like notifications or dark mode
- Changes take visible effect without submitting
- Settings pages organized around on/off mental models
✕ When not to use
- Changes need a save step — use a checkbox in a form
- Selecting several from a list — use checkboxes
- A third middle state is needed — use a segmented control
Variants
Basic
基础
Bare track without text
With text
带状态文字
On/off text inside for clarity
Settings row
设置行
Title left, switch right — the settings layout
Implementation
transitiontransform: translateXbackgroundborder-radius: 999pxFixed track width; the thumb translates between ends while the track color crossfades between grey and accent, all durations multiplied by --demo-speed. Express state with role="switch" and aria-checked; make the whole row clickable; hit height at least 32px even if visually smaller. Fade the status text with opacity to avoid jumps.
Platform API
<input type="checkbox" role="switch">In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
Related concepts
Square toggles for a set of independently selectable items, flipping between checked and unchecked on click. A parent can show an indeterminate state when only some children are checked — used for bulk selection, filters and consent.
ComponentsSimilarWhen users press a clickable element it scales down slightly (typically 0.95–0.98) and springs back on release. A few tens of milliseconds that make a UI feel like physical buttons instead of flat web pages.
MotionUsed withA utility page for managing account preferences and system configuration: a stable settings nav on one side (general, notifications, security…), and rows of "label + control + hint" forms on the other — low-frequency edits, saved as they change. Organized by configuration domain rather than task flow; users locate sections by scanning titles, change, and leave.
PagesUsed with