|$ curl https://forge-ai.dev/api/markdown?path=docs/components/toggle
$cat docs/toggles-&-switches.md
updated Recently·11 min read·published
Toggles & Switches
iOS-style toggle switches, labeled toggles, disabled states, sizes, color variants, and grouped toggle controls.
Basic Toggle
A simple iOS-style toggle switch with smooth sliding animation. Click to toggle between on and off states.
basic-toggle
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <label class="toggle"> |
| 3 | <input type="checkbox" checked> |
| 4 | <span class="track"> |
| 5 | <span class="thumb"> |
| 6 | </span> |
| 7 | </span> |
| 8 | </label> |
| 9 | <label class="toggle"> |
| 10 | <input type="checkbox"> |
| 11 | <span class="track"> |
| 12 | <span class="thumb"> |
| 13 | </span> |
| 14 | </span> |
| 15 | </label> |
| 16 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | gap:24px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .toggle { |
| 9 | position:relative; |
| 10 | display:inline-block; |
| 11 | cursor:pointer |
| 12 | } |
| 13 | .toggle input { |
| 14 | position:absolute; |
| 15 | opacity:0; |
| 16 | width:0; |
| 17 | height:0 |
| 18 | } |
| 19 | .track { |
| 20 | display:block; |
| 21 | width:44px; |
| 22 | height:24px; |
| 23 | background:#2A2A3E; |
| 24 | border-radius:12px; |
| 25 | transition:background .3s ease |
| 26 | } |
| 27 | .toggle input:checked+.track { |
| 28 | background:#00FF41 |
| 29 | } |
| 30 | .thumb { |
| 31 | position:absolute; |
| 32 | top:2px; |
| 33 | left:2px; |
| 34 | width:20px; |
| 35 | height:20px; |
| 36 | background:#E0E0E0; |
| 37 | border-radius:50%; |
| 38 | transition:transform .3s ease; |
| 39 | box-shadow:0 2px 4px rgba(0, |
| 40 | 0, |
| 41 | 0, |
| 42 | .2) |
| 43 | } |
| 44 | .toggle input:checked+.track .thumb { |
| 45 | transform:translateX(20px) |
| 46 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('.toggle input').forEach(cb=>{cb.addEventListener('change',()=>{console.log(cb.checked)})}) |
ℹ
info
Always pair a toggle with a visible label. Users should never have to guess what the toggle controls. Consider adding state text like "On" / "Off" for accessibility.
Labeled Toggles
Toggles with descriptive labels and current state indicator. Labels appear on either side of the switch.
labeled-toggle
Live
untitled.html
HTML
| 1 | <div class="list"> |
| 2 | <label class="toggle-row"> |
| 3 | <span class="label"> |
| 4 | <strong> |
| 5 | Dark Mode |
| 6 | </strong> |
| 7 | <span class="desc"> |
| 8 | Enable dark theme across the app |
| 9 | </span> |
| 10 | </span> |
| 11 | <label class="toggle"> |
| 12 | <input type="checkbox" checked> |
| 13 | <span class="track"> |
| 14 | <span class="thumb"> |
| 15 | </span> |
| 16 | </span> |
| 17 | </label> |
| 18 | </label> |
| 19 | <label class="toggle-row"> |
| 20 | <span class="label"> |
| 21 | <strong> |
| 22 | Notifications |
| 23 | </strong> |
| 24 | <span class="desc"> |
| 25 | Receive push notifications |
| 26 | </span> |
| 27 | </span> |
| 28 | <label class="toggle"> |
| 29 | <input type="checkbox"> |
| 30 | <span class="track"> |
| 31 | <span class="thumb"> |
| 32 | </span> |
| 33 | </span> |
| 34 | </label> |
| 35 | </label> |
| 36 | <label class="toggle-row"> |
| 37 | <span class="label"> |
| 38 | <strong> |
| 39 | Auto-save |
| 40 | </strong> |
| 41 | <span class="desc"> |
| 42 | Save changes every 30 seconds |
| 43 | </span> |
| 44 | </span> |
| 45 | <label class="toggle"> |
| 46 | <input type="checkbox" checked> |
| 47 | <span class="track"> |
| 48 | <span class="thumb"> |
| 49 | </span> |
| 50 | </span> |
| 51 | </label> |
| 52 | </label> |
| 53 | <label class="toggle-row"> |
| 54 | <span class="label"> |
| 55 | <strong> |
| 56 | Two-Factor Auth |
| 57 | </strong> |
| 58 | <span class="desc"> |
| 59 | Extra security for your account |
| 60 | </span> |
| 61 | </span> |
| 62 | <label class="toggle"> |
| 63 | <input type="checkbox"> |
| 64 | <span class="track"> |
| 65 | <span class="thumb"> |
| 66 | </span> |
| 67 | </span> |
| 68 | </label> |
| 69 | </label> |
| 70 | </div> |
untitled.css
CSS
| 1 | .list { |
| 2 | max-width:400px; |
| 3 | margin:16px auto; |
| 4 | display:flex; |
| 5 | flex-direction:column; |
| 6 | gap:0 |
| 7 | } |
| 8 | .toggle-row { |
| 9 | display:flex; |
| 10 | align-items:center; |
| 11 | justify-content:space-between; |
| 12 | padding:14px 16px; |
| 13 | border-bottom:1px solid #1A1A2E; |
| 14 | cursor:pointer; |
| 15 | transition:background .2s |
| 16 | } |
| 17 | .toggle-row:hover { |
| 18 | background:rgba(255, |
| 19 | 255, |
| 20 | 255, |
| 21 | .02) |
| 22 | } |
| 23 | .label { |
| 24 | display:flex; |
| 25 | flex-direction:column; |
| 26 | gap:2px |
| 27 | } |
| 28 | .label strong { |
| 29 | font-size:13px; |
| 30 | color:#E0E0E0; |
| 31 | font-weight:500 |
| 32 | } |
| 33 | .desc { |
| 34 | font-size:11px; |
| 35 | color:#606080 |
| 36 | } |
| 37 | .toggle { |
| 38 | position:relative; |
| 39 | display:inline-block; |
| 40 | cursor:pointer; |
| 41 | flex-shrink:0 |
| 42 | } |
| 43 | .toggle input { |
| 44 | position:absolute; |
| 45 | opacity:0; |
| 46 | width:0; |
| 47 | height:0 |
| 48 | } |
| 49 | .track { |
| 50 | display:block; |
| 51 | width:40px; |
| 52 | height:22px; |
| 53 | background:#2A2A3E; |
| 54 | border-radius:11px; |
| 55 | transition:background .3s ease |
| 56 | } |
| 57 | .toggle input:checked+.track { |
| 58 | background:#00FF41 |
| 59 | } |
| 60 | .thumb { |
| 61 | position:absolute; |
| 62 | top:2px; |
| 63 | left:2px; |
| 64 | width:18px; |
| 65 | height:18px; |
| 66 | background:#E0E0E0; |
| 67 | border-radius:50%; |
| 68 | transition:transform .3s ease; |
| 69 | box-shadow:0 2px 4px rgba(0, |
| 70 | 0, |
| 71 | 0, |
| 72 | .2) |
| 73 | } |
| 74 | .toggle input:checked+.track .thumb { |
| 75 | transform:translateX(18px) |
| 76 | } |
Disabled States
Disabled toggles that cannot be interacted with — dimmed appearance signals non-interactive state.
disabled-toggle
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <label class="toggle"> |
| 3 | <input type="checkbox" disabled> |
| 4 | <span class="track"> |
| 5 | <span class="thumb"> |
| 6 | </span> |
| 7 | </span> |
| 8 | <span class="lbl"> |
| 9 | Off & Disabled |
| 10 | </span> |
| 11 | </label> |
| 12 | <label class="toggle"> |
| 13 | <input type="checkbox" checked disabled> |
| 14 | <span class="track"> |
| 15 | <span class="thumb"> |
| 16 | </span> |
| 17 | </span> |
| 18 | <span class="lbl"> |
| 19 | On & Disabled |
| 20 | </span> |
| 21 | </label> |
| 22 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | gap:32px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .toggle { |
| 9 | position:relative; |
| 10 | display:inline-flex; |
| 11 | align-items:center; |
| 12 | gap:10px; |
| 13 | cursor:not-allowed; |
| 14 | opacity:.5 |
| 15 | } |
| 16 | .toggle input { |
| 17 | position:absolute; |
| 18 | opacity:0; |
| 19 | width:0; |
| 20 | height:0 |
| 21 | } |
| 22 | .track { |
| 23 | display:block; |
| 24 | width:44px; |
| 25 | height:24px; |
| 26 | background:#2A2A3E; |
| 27 | border-radius:12px; |
| 28 | transition:background .3s ease |
| 29 | } |
| 30 | .toggle input:checked+.track { |
| 31 | background:#00FF41; |
| 32 | opacity:.6 |
| 33 | } |
| 34 | .thumb { |
| 35 | position:absolute; |
| 36 | top:2px; |
| 37 | left:2px; |
| 38 | width:20px; |
| 39 | height:20px; |
| 40 | background:#E0E0E0; |
| 41 | border-radius:50%; |
| 42 | transition:transform .3s ease; |
| 43 | box-shadow:0 2px 4px rgba(0, |
| 44 | 0, |
| 45 | 0, |
| 46 | .2) |
| 47 | } |
| 48 | .toggle input:checked+.track .thumb { |
| 49 | transform:translateX(20px) |
| 50 | } |
| 51 | .lbl { |
| 52 | font-size:12px; |
| 53 | color:#606080; |
| 54 | user-select:none |
| 55 | } |
⚠
warning
Disabled toggles should still convey their current state (on/off) visually. Avoid hiding them entirely — dim them instead so users understand the setting exists but is controlled elsewhere.
Sizes
Small, medium, and large toggles to fit different UI densities — from compact tables to spacious settings panels.
toggle-sizes
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <label class="toggle sm"> |
| 3 | <input type="checkbox" checked> |
| 4 | <span class="track"> |
| 5 | <span class="thumb"> |
| 6 | </span> |
| 7 | </span> |
| 8 | </label> |
| 9 | <label class="toggle md"> |
| 10 | <input type="checkbox" checked> |
| 11 | <span class="track"> |
| 12 | <span class="thumb"> |
| 13 | </span> |
| 14 | </span> |
| 15 | </label> |
| 16 | <label class="toggle lg"> |
| 17 | <input type="checkbox" checked> |
| 18 | <span class="track"> |
| 19 | <span class="thumb"> |
| 20 | </span> |
| 21 | </span> |
| 22 | </label> |
| 23 | <label class="toggle xl"> |
| 24 | <input type="checkbox" checked> |
| 25 | <span class="track"> |
| 26 | <span class="thumb"> |
| 27 | </span> |
| 28 | </span> |
| 29 | </label> |
| 30 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | gap:24px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .toggle { |
| 9 | position:relative; |
| 10 | display:inline-block; |
| 11 | cursor:pointer |
| 12 | } |
| 13 | .toggle input { |
| 14 | position:absolute; |
| 15 | opacity:0; |
| 16 | width:0; |
| 17 | height:0 |
| 18 | } |
| 19 | .track { |
| 20 | display:block; |
| 21 | border-radius:999px; |
| 22 | transition:background .3s ease; |
| 23 | background:#2A2A3E |
| 24 | } |
| 25 | .toggle input:checked+.track { |
| 26 | background:#00FF41 |
| 27 | } |
| 28 | .thumb { |
| 29 | position:absolute; |
| 30 | background:#E0E0E0; |
| 31 | border-radius:50%; |
| 32 | transition:transform .3s ease; |
| 33 | box-shadow:0 1px 3px rgba(0, |
| 34 | 0, |
| 35 | 0, |
| 36 | .2) |
| 37 | } |
| 38 | .toggle input:checked+.track .thumb { |
| 39 | transform:translateX(var(--slide)) |
| 40 | } |
| 41 | .sm .track { |
| 42 | width:28px; |
| 43 | height:16px |
| 44 | } |
| 45 | .sm .thumb { |
| 46 | width:12px; |
| 47 | height:12px; |
| 48 | top:2px; |
| 49 | left:2px; |
| 50 | --slide:12px |
| 51 | } |
| 52 | .md .track { |
| 53 | width:40px; |
| 54 | height:22px |
| 55 | } |
| 56 | .md .thumb { |
| 57 | width:18px; |
| 58 | height:18px; |
| 59 | top:2px; |
| 60 | left:2px; |
| 61 | --slide:18px |
| 62 | } |
| 63 | .lg .track { |
| 64 | width:52px; |
| 65 | height:28px |
| 66 | } |
| 67 | .lg .thumb { |
| 68 | width:24px; |
| 69 | height:24px; |
| 70 | top:2px; |
| 71 | left:2px; |
| 72 | --slide:24px |
| 73 | } |
| 74 | .xl .track { |
| 75 | width:64px; |
| 76 | height:34px |
| 77 | } |
| 78 | .xl .thumb { |
| 79 | width:30px; |
| 80 | height:30px; |
| 81 | top:2px; |
| 82 | left:2px; |
| 83 | --slide:30px |
| 84 | } |
Color Variants
Custom accent colors for toggles — use semantic colors to match the action context.
toggle-colors
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <label class="toggle"> |
| 3 | <input type="checkbox" checked> |
| 4 | <span class="track green"> |
| 5 | <span class="thumb"> |
| 6 | </span> |
| 7 | </span> |
| 8 | </label> |
| 9 | <label class="toggle"> |
| 10 | <input type="checkbox" checked> |
| 11 | <span class="track blue"> |
| 12 | <span class="thumb"> |
| 13 | </span> |
| 14 | </span> |
| 15 | </label> |
| 16 | <label class="toggle"> |
| 17 | <input type="checkbox" checked> |
| 18 | <span class="track purple"> |
| 19 | <span class="thumb"> |
| 20 | </span> |
| 21 | </span> |
| 22 | </label> |
| 23 | <label class="toggle"> |
| 24 | <input type="checkbox" checked> |
| 25 | <span class="track red"> |
| 26 | <span class="thumb"> |
| 27 | </span> |
| 28 | </span> |
| 29 | </label> |
| 30 | <label class="toggle"> |
| 31 | <input type="checkbox" checked> |
| 32 | <span class="track orange"> |
| 33 | <span class="thumb"> |
| 34 | </span> |
| 35 | </span> |
| 36 | </label> |
| 37 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | gap:20px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .toggle { |
| 9 | position:relative; |
| 10 | display:inline-block; |
| 11 | cursor:pointer |
| 12 | } |
| 13 | .toggle input { |
| 14 | position:absolute; |
| 15 | opacity:0; |
| 16 | width:0; |
| 17 | height:0 |
| 18 | } |
| 19 | .track { |
| 20 | display:block; |
| 21 | width:44px; |
| 22 | height:24px; |
| 23 | border-radius:12px; |
| 24 | transition:background .3s ease; |
| 25 | background:#2A2A3E |
| 26 | } |
| 27 | .track.green { |
| 28 | background:#22C55E |
| 29 | } |
| 30 | .track.blue { |
| 31 | background:#3B82F6 |
| 32 | } |
| 33 | .track.purple { |
| 34 | background:#A855F7 |
| 35 | } |
| 36 | .track.red { |
| 37 | background:#EF4444 |
| 38 | } |
| 39 | .track.orange { |
| 40 | background:#F97316 |
| 41 | } |
| 42 | .thumb { |
| 43 | position:absolute; |
| 44 | top:2px; |
| 45 | left:2px; |
| 46 | width:20px; |
| 47 | height:20px; |
| 48 | background:#fff; |
| 49 | border-radius:50%; |
| 50 | transition:transform .3s ease; |
| 51 | box-shadow:0 2px 4px rgba(0, |
| 52 | 0, |
| 53 | 0, |
| 54 | .2) |
| 55 | } |
| 56 | .toggle input:checked+.track .thumb { |
| 57 | transform:translateX(20px) |
| 58 | } |
✓
best practice
Use green for positive/safe toggles (dark mode, notifications), red for destructive or security-sensitive actions (delete protection, public visibility), and blue for neutral feature flags.
Icon Toggle
Toggle switches with icons inside the track — sun/moon for theme, lock for security, volume for sound.
icon-toggle
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <label class="toggle icon"> |
| 3 | <input type="checkbox" checked> |
| 4 | <span class="track"> |
| 5 | <span class="thumb"> |
| 6 | <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"> |
| 7 | <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/> |
| 8 | </svg> |
| 9 | </span> |
| 10 | </span> |
| 11 | </label> |
| 12 | <label class="toggle icon"> |
| 13 | <input type="checkbox"> |
| 14 | <span class="track"> |
| 15 | <span class="thumb"> |
| 16 | <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 17 | <circle cx="12" cy="12" r="5"/> |
| 18 | <line x1="12" y1="1" x2="12" y2="3"/> |
| 19 | <line x1="12" y1="21" x2="12" y2="23"/> |
| 20 | <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/> |
| 21 | <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/> |
| 22 | <line x1="1" y1="12" x2="3" y2="12"/> |
| 23 | <line x1="21" y1="12" x2="23" y2="12"/> |
| 24 | <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/> |
| 25 | <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/> |
| 26 | </svg> |
| 27 | </span> |
| 28 | </span> |
| 29 | </label> |
| 30 | <label class="toggle icon"> |
| 31 | <input type="checkbox" checked> |
| 32 | <span class="track"> |
| 33 | <span class="thumb"> |
| 34 | <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 35 | <path d="M11 5L6 9H2v6h4l5 4V5z"/> |
| 36 | <path d="M19.07 4.93a10 10 0 0 1 0 14.14"/> |
| 37 | <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/> |
| 38 | </svg> |
| 39 | </span> |
| 40 | </span> |
| 41 | </label> |
| 42 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | gap:20px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .toggle { |
| 9 | position:relative; |
| 10 | display:inline-block; |
| 11 | cursor:pointer |
| 12 | } |
| 13 | .toggle input { |
| 14 | position:absolute; |
| 15 | opacity:0; |
| 16 | width:0; |
| 17 | height:0 |
| 18 | } |
| 19 | .track { |
| 20 | display:block; |
| 21 | width:44px; |
| 22 | height:24px; |
| 23 | background:#2A2A3E; |
| 24 | border-radius:12px; |
| 25 | transition:background .3s ease |
| 26 | } |
| 27 | .toggle input:checked+.track { |
| 28 | background:#00FF41 |
| 29 | } |
| 30 | .thumb { |
| 31 | position:absolute; |
| 32 | top:2px; |
| 33 | left:2px; |
| 34 | width:20px; |
| 35 | height:20px; |
| 36 | background:#606080; |
| 37 | border-radius:50%; |
| 38 | transition:all .3s ease; |
| 39 | display:flex; |
| 40 | align-items:center; |
| 41 | justify-content:center; |
| 42 | color:#0A0A0A |
| 43 | } |
| 44 | .toggle input:checked+.track .thumb { |
| 45 | transform:translateX(20px); |
| 46 | background:#fff; |
| 47 | color:#00FF41 |
| 48 | } |
Loading State
Toggles with a spinner inside the track while the state change is being processed on the server.
loading-toggle
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <label class="toggle"> |
| 3 | <input type="checkbox" checked> |
| 4 | <span class="track loading"> |
| 5 | <span class="thumb spinner"> |
| 6 | <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 7 | <circle cx="12" cy="12" r="10" stroke-dasharray="31.42" stroke-dashoffset="10"/> |
| 8 | </svg> |
| 9 | </span> |
| 10 | </span> |
| 11 | </label> |
| 12 | <label class="toggle"> |
| 13 | <input type="checkbox"> |
| 14 | <span class="track loading"> |
| 15 | <span class="thumb spinner"> |
| 16 | <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 17 | <circle cx="12" cy="12" r="10" stroke-dasharray="31.42" stroke-dashoffset="20"/> |
| 18 | </svg> |
| 19 | </span> |
| 20 | </span> |
| 21 | </label> |
| 22 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | gap:24px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | @keyframes spin { |
| 9 | to { |
| 10 | transform:rotate(360deg) |
| 11 | } |
| 12 | } |
| 13 | .toggle { |
| 14 | position:relative; |
| 15 | display:inline-block; |
| 16 | cursor:pointer; |
| 17 | pointer-events:none |
| 18 | } |
| 19 | .toggle input { |
| 20 | position:absolute; |
| 21 | opacity:0; |
| 22 | width:0; |
| 23 | height:0 |
| 24 | } |
| 25 | .track { |
| 26 | display:block; |
| 27 | width:44px; |
| 28 | height:24px; |
| 29 | background:#2A2A3E; |
| 30 | border-radius:12px; |
| 31 | transition:background .3s ease |
| 32 | } |
| 33 | .track.loading { |
| 34 | opacity:.7 |
| 35 | } |
| 36 | .toggle input:checked+.track { |
| 37 | background:#00FF41 |
| 38 | } |
| 39 | .thumb { |
| 40 | position:absolute; |
| 41 | top:2px; |
| 42 | left:2px; |
| 43 | width:20px; |
| 44 | height:20px; |
| 45 | border-radius:50%; |
| 46 | transition:all .3s ease; |
| 47 | display:flex; |
| 48 | align-items:center; |
| 49 | justify-content:center |
| 50 | } |
| 51 | .spinner { |
| 52 | animation:spin .8s linear infinite; |
| 53 | color:#E0E0E0 |
| 54 | } |
| 55 | .toggle input:checked+.track .spinner { |
| 56 | color:#0A0A0A |
| 57 | } |
🔥
pro tip
When toggling state triggers an API call, disable the toggle and show a spinner. Re-enable once the response arrives. This prevents double-taps and gives clear feedback that something is happening.
Grouped Toggles
Multiple toggles organized in a card-style group with section headers — ideal for settings panels.
grouped-toggle
Live
untitled.html
HTML
| 1 | <div class="card"> |
| 2 | <div class="card-header"> |
| 3 | <h3> |
| 4 | Settings |
| 5 | </h3> |
| 6 | </div> |
| 7 | <div class="card-body"> |
| 8 | <div class="section"> |
| 9 | <div class="section-title"> |
| 10 | Appearance |
| 11 | </div> |
| 12 | <label class="toggle-row"> |
| 13 | <span> |
| 14 | Dark Mode |
| 15 | </span> |
| 16 | <label class="toggle"> |
| 17 | <input type="checkbox" checked> |
| 18 | <span class="track"> |
| 19 | <span class="thumb"> |
| 20 | </span> |
| 21 | </span> |
| 22 | </label> |
| 23 | </label> |
| 24 | <label class="toggle-row"> |
| 25 | <span> |
| 26 | Compact View |
| 27 | </span> |
| 28 | <label class="toggle"> |
| 29 | <input type="checkbox"> |
| 30 | <span class="track"> |
| 31 | <span class="thumb"> |
| 32 | </span> |
| 33 | </span> |
| 34 | </label> |
| 35 | </label> |
| 36 | <label class="toggle-row"> |
| 37 | <span> |
| 38 | Animations |
| 39 | </span> |
| 40 | <label class="toggle"> |
| 41 | <input type="checkbox" checked> |
| 42 | <span class="track"> |
| 43 | <span class="thumb"> |
| 44 | </span> |
| 45 | </span> |
| 46 | </label> |
| 47 | </label> |
| 48 | </div> |
| 49 | <div class="divider"> |
| 50 | </div> |
| 51 | <div class="section"> |
| 52 | <div class="section-title"> |
| 53 | Privacy |
| 54 | </div> |
| 55 | <label class="toggle-row"> |
| 56 | <span> |
| 57 | Public Profile |
| 58 | </span> |
| 59 | <label class="toggle"> |
| 60 | <input type="checkbox"> |
| 61 | <span class="track"> |
| 62 | <span class="thumb"> |
| 63 | </span> |
| 64 | </span> |
| 65 | </label> |
| 66 | </label> |
| 67 | <label class="toggle-row"> |
| 68 | <span> |
| 69 | Activity Status |
| 70 | </span> |
| 71 | <label class="toggle"> |
| 72 | <input type="checkbox" checked> |
| 73 | <span class="track"> |
| 74 | <span class="thumb"> |
| 75 | </span> |
| 76 | </span> |
| 77 | </label> |
| 78 | </label> |
| 79 | </div> |
| 80 | </div> |
| 81 | </div> |
untitled.css
CSS
| 1 | .card { |
| 2 | max-width:360px; |
| 3 | margin:16px auto; |
| 4 | border-radius:12px; |
| 5 | border:1px solid #1A1A2E; |
| 6 | background:#0A0A0F; |
| 7 | overflow:hidden |
| 8 | } |
| 9 | .card-header { |
| 10 | padding:16px 20px; |
| 11 | border-bottom:1px solid #1A1A2E |
| 12 | } |
| 13 | .card-header h3 { |
| 14 | font-size:14px; |
| 15 | color:#E0E0E0; |
| 16 | font-weight:600; |
| 17 | margin:0 |
| 18 | } |
| 19 | .card-body { |
| 20 | padding:8px 0 |
| 21 | } |
| 22 | .section { |
| 23 | padding:4px 0 |
| 24 | } |
| 25 | .section-title { |
| 26 | font-size:10px; |
| 27 | text-transform:uppercase; |
| 28 | letter-spacing:1px; |
| 29 | color:#00FF41; |
| 30 | padding:8px 20px 4px; |
| 31 | font-weight:600 |
| 32 | } |
| 33 | .divider { |
| 34 | height:1px; |
| 35 | background:#1A1A2E; |
| 36 | margin:4px 0 |
| 37 | } |
| 38 | .toggle-row { |
| 39 | display:flex; |
| 40 | align-items:center; |
| 41 | justify-content:space-between; |
| 42 | padding:10px 20px; |
| 43 | font-size:13px; |
| 44 | color:#C0C0C0; |
| 45 | cursor:pointer; |
| 46 | transition:background .2s |
| 47 | } |
| 48 | .toggle-row:hover { |
| 49 | background:rgba(255, |
| 50 | 255, |
| 51 | 255, |
| 52 | .02) |
| 53 | } |
| 54 | .toggle { |
| 55 | position:relative; |
| 56 | display:inline-block; |
| 57 | cursor:pointer; |
| 58 | flex-shrink:0 |
| 59 | } |
| 60 | .toggle input { |
| 61 | position:absolute; |
| 62 | opacity:0; |
| 63 | width:0; |
| 64 | height:0 |
| 65 | } |
| 66 | .track { |
| 67 | display:block; |
| 68 | width:40px; |
| 69 | height:22px; |
| 70 | background:#2A2A3E; |
| 71 | border-radius:11px; |
| 72 | transition:background .3s ease |
| 73 | } |
| 74 | .toggle input:checked+.track { |
| 75 | background:#00FF41 |
| 76 | } |
| 77 | .thumb { |
| 78 | position:absolute; |
| 79 | top:2px; |
| 80 | left:2px; |
| 81 | width:18px; |
| 82 | height:18px; |
| 83 | background:#E0E0E0; |
| 84 | border-radius:50%; |
| 85 | transition:transform .3s ease; |
| 86 | box-shadow:0 1px 3px rgba(0, |
| 87 | 0, |
| 88 | 0, |
| 89 | .2) |
| 90 | } |
| 91 | .toggle input:checked+.track .thumb { |
| 92 | transform:translateX(18px) |
| 93 | } |
📝
note
Grouped toggles work well inside cards or panels. Use section dividers and titles to organize related settings. Consider batching API calls if multiple toggles in a group trigger server updates.
Toggle with Status Text
Toggles that display their current state as text next to the switch — useful for forms and accessibility.
status-toggle
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <label class="toggle-status"> |
| 3 | <label class="toggle"> |
| 4 | <input type="checkbox" checked> |
| 5 | <span class="track"> |
| 6 | <span class="thumb"> |
| 7 | </span> |
| 8 | </span> |
| 9 | </label> |
| 10 | <span class="status on"> |
| 11 | Enabled |
| 12 | </span> |
| 13 | </label> |
| 14 | <label class="toggle-status"> |
| 15 | <label class="toggle"> |
| 16 | <input type="checkbox"> |
| 17 | <span class="track"> |
| 18 | <span class="thumb"> |
| 19 | </span> |
| 20 | </span> |
| 21 | </label> |
| 22 | <span class="status off"> |
| 23 | Disabled |
| 24 | </span> |
| 25 | </label> |
| 26 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | gap:32px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .toggle-status { |
| 9 | display:flex; |
| 10 | align-items:center; |
| 11 | gap:12px |
| 12 | } |
| 13 | .toggle { |
| 14 | position:relative; |
| 15 | display:inline-block; |
| 16 | cursor:pointer |
| 17 | } |
| 18 | .toggle input { |
| 19 | position:absolute; |
| 20 | opacity:0; |
| 21 | width:0; |
| 22 | height:0 |
| 23 | } |
| 24 | .track { |
| 25 | display:block; |
| 26 | width:44px; |
| 27 | height:24px; |
| 28 | background:#2A2A3E; |
| 29 | border-radius:12px; |
| 30 | transition:background .3s ease |
| 31 | } |
| 32 | .toggle input:checked+.track { |
| 33 | background:#00FF41 |
| 34 | } |
| 35 | .thumb { |
| 36 | position:absolute; |
| 37 | top:2px; |
| 38 | left:2px; |
| 39 | width:20px; |
| 40 | height:20px; |
| 41 | background:#E0E0E0; |
| 42 | border-radius:50%; |
| 43 | transition:transform .3s ease; |
| 44 | box-shadow:0 2px 4px rgba(0, |
| 45 | 0, |
| 46 | 0, |
| 47 | .2) |
| 48 | } |
| 49 | .toggle input:checked+.track .thumb { |
| 50 | transform:translateX(20px) |
| 51 | } |
| 52 | .status { |
| 53 | font-size:12px; |
| 54 | font-weight:600; |
| 55 | font-family:monospace; |
| 56 | min-width:64px |
| 57 | } |
| 58 | .status.on { |
| 59 | color:#00FF41 |
| 60 | } |
| 61 | .status.off { |
| 62 | color:#606080 |
| 63 | } |
✓
best practice
Toggle button groups are ideal for mutually exclusive options (like view modes or themes). For independent on/off settings, use standard toggle switches instead.
Keyboard Accessible
All toggles are keyboard accessible — use Tab to focus and Space to toggle. Focus ring is visible for clarity.
keyboard-toggle
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <label class="toggle focusable"> |
| 3 | <input type="checkbox" checked> |
| 4 | <span class="track"> |
| 5 | <span class="thumb"> |
| 6 | </span> |
| 7 | </span> |
| 8 | <span class="lbl"> |
| 9 | Tab to me, press Space |
| 10 | </span> |
| 11 | </label> |
| 12 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | gap:24px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .toggle { |
| 9 | position:relative; |
| 10 | display:inline-flex; |
| 11 | align-items:center; |
| 12 | gap:12px; |
| 13 | cursor:pointer |
| 14 | } |
| 15 | .toggle input { |
| 16 | position:absolute; |
| 17 | opacity:0; |
| 18 | width:0; |
| 19 | height:0 |
| 20 | } |
| 21 | .toggle input:focus-visible+.track { |
| 22 | outline:2px solid #00FF41; |
| 23 | outline-offset:2px |
| 24 | } |
| 25 | .track { |
| 26 | display:block; |
| 27 | width:44px; |
| 28 | height:24px; |
| 29 | background:#2A2A3E; |
| 30 | border-radius:12px; |
| 31 | transition:background .3s ease |
| 32 | } |
| 33 | .toggle input:checked+.track { |
| 34 | background:#00FF41 |
| 35 | } |
| 36 | .thumb { |
| 37 | position:absolute; |
| 38 | top:2px; |
| 39 | left:2px; |
| 40 | width:20px; |
| 41 | height:20px; |
| 42 | background:#E0E0E0; |
| 43 | border-radius:50%; |
| 44 | transition:transform .3s ease; |
| 45 | box-shadow:0 2px 4px rgba(0, |
| 46 | 0, |
| 47 | 0, |
| 48 | .2) |
| 49 | } |
| 50 | .toggle input:checked+.track .thumb { |
| 51 | transform:translateX(20px) |
| 52 | } |
| 53 | .lbl { |
| 54 | font-size:12px; |
| 55 | color:#A0A0A0 |
| 56 | } |
ℹ
info
Always add a visible focus indicator for keyboard users. The native checkbox handles keyboard interaction automatically — just style the focus-visible state with an outline or ring. Never remove the underlying checkbox input.