|$ curl https://forge-ai.dev/api/markdown?path=docs/components/toggle
$cat docs/toggles-&-switches.md
updated Recently·18 min read·published
Toggles & Switches
Introduction
Toggle switches are compact controls for binary on/off decisions. This guide covers production-ready toggle patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap — including labeled switches, icon toggles, sizes, color variants, loading states, grouped settings, and accessibility.
ℹ
info
Always keep the native <input type="checkbox"> in the markup and hide it visually. It provides keyboard support, screen-reader announcements, and form participation for free.
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)})}) |
untitled.html
HTML
| 1 | <div class="flex gap-6 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <label class="relative inline-block cursor-pointer"> |
| 3 | <input type="checkbox" checked class="absolute opacity-0 w-0 h-0 peer"> |
| 4 | <span class="block w-11 h-6 rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 5 | </span> |
| 6 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-5"> |
| 7 | </span> |
| 8 | </label> |
| 9 | <label class="relative inline-block cursor-pointer"> |
| 10 | <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer"> |
| 11 | <span class="block w-11 h-6 rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 12 | </span> |
| 13 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-5"> |
| 14 | </span> |
| 15 | </label> |
| 16 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-4 align-items-center justify-content-center p-4"> |
| 2 | <div class="form-check form-switch"> |
| 3 | <input class="form-check-input" type="checkbox" checked style="width:44px;height:24px;--bs-form-switch-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23E0E0E0%27/%3e%3c/svg%3e');--bs-form-switch-checked-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%230A0A0A%27/%3e%3c/svg%3e');background-color:#2A2A3E;border-color:#2A2A3E" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 4 | </div> |
| 5 | <div class="form-check form-switch"> |
| 6 | <input class="form-check-input" type="checkbox" style="width:44px;height:24px;--bs-form-switch-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23E0E0E0%27/%3e%3c/svg%3e');--bs-form-switch-checked-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%230A0A0A%27/%3e%3c/svg%3e');background-color:#2A2A3E;border-color:#2A2A3E" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 7 | </div> |
| 8 | </div> |
Labeled Toggles
Toggles with descriptive labels and helper text. Labels appear on either side of the switch in a settings-list pattern.
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:420px; |
| 3 | margin:16px auto; |
| 4 | display:flex; |
| 5 | flex-direction:column; |
| 6 | gap:0; |
| 7 | border:1px solid #1A1A2E; |
| 8 | border-radius:12px; |
| 9 | background:#0A0A0F; |
| 10 | overflow:hidden |
| 11 | } |
| 12 | .toggle-row { |
| 13 | display:flex; |
| 14 | align-items:center; |
| 15 | justify-content:space-between; |
| 16 | padding:14px 18px; |
| 17 | border-bottom:1px solid #151515; |
| 18 | cursor:pointer; |
| 19 | transition:background .2s |
| 20 | } |
| 21 | .toggle-row:last-child { |
| 22 | border-bottom:none |
| 23 | } |
| 24 | .toggle-row:hover { |
| 25 | background:rgba(255, |
| 26 | 255, |
| 27 | 255, |
| 28 | .02) |
| 29 | } |
| 30 | .label { |
| 31 | display:flex; |
| 32 | flex-direction:column; |
| 33 | gap:2px |
| 34 | } |
| 35 | .label strong { |
| 36 | font-size:13px; |
| 37 | color:#E0E0E0; |
| 38 | font-weight:500 |
| 39 | } |
| 40 | .desc { |
| 41 | font-size:11px; |
| 42 | color:#808080 |
| 43 | } |
| 44 | .toggle { |
| 45 | position:relative; |
| 46 | display:inline-block; |
| 47 | cursor:pointer; |
| 48 | flex-shrink:0 |
| 49 | } |
| 50 | .toggle input { |
| 51 | position:absolute; |
| 52 | opacity:0; |
| 53 | width:0; |
| 54 | height:0 |
| 55 | } |
| 56 | .track { |
| 57 | display:block; |
| 58 | width:40px; |
| 59 | height:22px; |
| 60 | background:#2A2A3E; |
| 61 | border-radius:11px; |
| 62 | transition:background .3s ease |
| 63 | } |
| 64 | .toggle input:checked+.track { |
| 65 | background:#00FF41 |
| 66 | } |
| 67 | .thumb { |
| 68 | position:absolute; |
| 69 | top:2px; |
| 70 | left:2px; |
| 71 | width:18px; |
| 72 | height:18px; |
| 73 | background:#E0E0E0; |
| 74 | border-radius:50%; |
| 75 | transition:transform .3s ease; |
| 76 | box-shadow:0 2px 4px rgba(0, |
| 77 | 0, |
| 78 | 0, |
| 79 | .2) |
| 80 | } |
| 81 | .toggle input:checked+.track .thumb { |
| 82 | transform:translateX(18px) |
| 83 | } |
untitled.html
HTML
| 1 | <div class="max-w-md mx-auto my-4 border border-[#1A1A2E] rounded-xl bg-[#0A0A0F] overflow-hidden"> |
| 2 | <label class="flex items-center justify-between px-4 py-3.5 border-b border-[#151515] hover:bg-white/[0.02] cursor-pointer transition-colors"> |
| 3 | <span class="flex flex-col gap-0.5"> |
| 4 | <strong class="text-[13px] text-[#E0E0E0] font-medium"> |
| 5 | Dark Mode |
| 6 | </strong> |
| 7 | <span class="text-[11px] text-[#808080]"> |
| 8 | Enable dark theme across the app |
| 9 | </span> |
| 10 | </span> |
| 11 | <span class="relative inline-block cursor-pointer flex-shrink-0"> |
| 12 | <input type="checkbox" checked class="absolute opacity-0 w-0 h-0 peer"> |
| 13 | <span class="block w-10 h-[22px] rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 14 | </span> |
| 15 | <span class="absolute top-[2px] left-[2px] w-[18px] h-[18px] rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-[18px]"> |
| 16 | </span> |
| 17 | </span> |
| 18 | </label> |
| 19 | <label class="flex items-center justify-between px-4 py-3.5 border-b border-[#151515] hover:bg-white/[0.02] cursor-pointer transition-colors"> |
| 20 | <span class="flex flex-col gap-0.5"> |
| 21 | <strong class="text-[13px] text-[#E0E0E0] font-medium"> |
| 22 | Notifications |
| 23 | </strong> |
| 24 | <span class="text-[11px] text-[#808080]"> |
| 25 | Receive push notifications |
| 26 | </span> |
| 27 | </span> |
| 28 | <span class="relative inline-block cursor-pointer flex-shrink-0"> |
| 29 | <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer"> |
| 30 | <span class="block w-10 h-[22px] rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 31 | </span> |
| 32 | <span class="absolute top-[2px] left-[2px] w-[18px] h-[18px] rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-[18px]"> |
| 33 | </span> |
| 34 | </span> |
| 35 | </label> |
| 36 | <label class="flex items-center justify-between px-4 py-3.5 hover:bg-white/[0.02] cursor-pointer transition-colors"> |
| 37 | <span class="flex flex-col gap-0.5"> |
| 38 | <strong class="text-[13px] text-[#E0E0E0] font-medium"> |
| 39 | Auto-save |
| 40 | </strong> |
| 41 | <span class="text-[11px] text-[#808080]"> |
| 42 | Save changes every 30 seconds |
| 43 | </span> |
| 44 | </span> |
| 45 | <span class="relative inline-block cursor-pointer flex-shrink-0"> |
| 46 | <input type="checkbox" checked class="absolute opacity-0 w-0 h-0 peer"> |
| 47 | <span class="block w-10 h-[22px] rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 48 | </span> |
| 49 | <span class="absolute top-[2px] left-[2px] w-[18px] h-[18px] rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-[18px]"> |
| 50 | </span> |
| 51 | </span> |
| 52 | </label> |
| 53 | </div> |
untitled.html
HTML
| 1 | <div class="list-group mx-auto" style="max-width:420px"> |
| 2 | <label class="list-group-item d-flex justify-content-between align-items-center bg-transparent border-secondary text-[#E0E0E0]"> |
| 3 | <div> |
| 4 | <div class="fw-medium" style="font-size:13px"> |
| 5 | Dark Mode |
| 6 | </div> |
| 7 | <small class="text-secondary" style="font-size:11px"> |
| 8 | Enable dark theme across the app |
| 9 | </small> |
| 10 | </div> |
| 11 | <div class="form-check form-switch"> |
| 12 | <input class="form-check-input" type="checkbox" checked style="width:40px;height:22px;--bs-form-switch-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23E0E0E0%27/%3e%3c/svg%3e');--bs-form-switch-checked-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%230A0A0A%27/%3e%3c/svg%3e');background-color:#2A2A3E;border-color:#2A2A3E" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 13 | </div> |
| 14 | </label> |
| 15 | <label class="list-group-item d-flex justify-content-between align-items-center bg-transparent border-secondary text-[#E0E0E0]"> |
| 16 | <div> |
| 17 | <div class="fw-medium" style="font-size:13px"> |
| 18 | Notifications |
| 19 | </div> |
| 20 | <small class="text-secondary" style="font-size:11px"> |
| 21 | Receive push notifications |
| 22 | </small> |
| 23 | </div> |
| 24 | <div class="form-check form-switch"> |
| 25 | <input class="form-check-input" type="checkbox" style="width:40px;height:22px;--bs-form-switch-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23E0E0E0%27/%3e%3c/svg%3e');--bs-form-switch-checked-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%230A0A0A%27/%3e%3c/svg%3e');background-color:#2A2A3E;border-color:#2A2A3E" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 26 | </div> |
| 27 | </label> |
| 28 | <label class="list-group-item d-flex justify-content-between align-items-center bg-transparent border-secondary text-[#E0E0E0]"> |
| 29 | <div> |
| 30 | <div class="fw-medium" style="font-size:13px"> |
| 31 | Auto-save |
| 32 | </div> |
| 33 | <small class="text-secondary" style="font-size:11px"> |
| 34 | Save changes every 30 seconds |
| 35 | </small> |
| 36 | </div> |
| 37 | <div class="form-check form-switch"> |
| 38 | <input class="form-check-input" type="checkbox" checked style="width:40px;height:22px;--bs-form-switch-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23E0E0E0%27/%3e%3c/svg%3e');--bs-form-switch-checked-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%230A0A0A%27/%3e%3c/svg%3e');background-color:#2A2A3E;border-color:#2A2A3E" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 39 | </div> |
| 40 | </label> |
| 41 | </div> |
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 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('.toggle-status').forEach(row=>{const cb=row.querySelector('input');const txt=row.querySelector('.status');cb.addEventListener('change',()=>{txt.textContent=cb.checked?'Enabled':'Disabled';txt.className='status '+(cb.checked?'on':'off')})}) |
untitled.html
HTML
| 1 | <div class="flex gap-8 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <label class="flex items-center gap-3" data-status> |
| 3 | <span class="relative inline-block cursor-pointer"> |
| 4 | <input type="checkbox" checked class="absolute opacity-0 w-0 h-0 peer"> |
| 5 | <span class="block w-11 h-6 rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 6 | </span> |
| 7 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-5"> |
| 8 | </span> |
| 9 | </span> |
| 10 | <span class="text-xs font-mono font-semibold min-w-[64px] text-[#00FF41]"> |
| 11 | Enabled |
| 12 | </span> |
| 13 | </label> |
| 14 | <label class="flex items-center gap-3" data-status> |
| 15 | <span class="relative inline-block cursor-pointer"> |
| 16 | <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer"> |
| 17 | <span class="block w-11 h-6 rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 18 | </span> |
| 19 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-5"> |
| 20 | </span> |
| 21 | </span> |
| 22 | <span class="text-xs font-mono font-semibold min-w-[64px] text-[#606080]"> |
| 23 | Disabled |
| 24 | </span> |
| 25 | </label> |
| 26 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-4 align-items-center justify-content-center p-4"> |
| 2 | <div class="d-flex align-items-center gap-3" data-status> |
| 3 | <div class="form-check form-switch"> |
| 4 | <input class="form-check-input" type="checkbox" checked style="width:44px;height:24px;--bs-form-switch-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23E0E0E0%27/%3e%3c/svg%3e');--bs-form-switch-checked-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%230A0A0A%27/%3e%3c/svg%3e');background-color:#2A2A3E;border-color:#2A2A3E" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E';this.closest('[data-status]').querySelector('.status-text').textContent=this.checked?'Enabled':'Disabled';this.closest('[data-status]').querySelector('.status-text').style.color=this.checked?'#00FF41':'#606080'"> |
| 5 | </div> |
| 6 | <span class="status-text font-monospace fw-semibold" style="font-size:12px;min-width:64px;color:#00FF41"> |
| 7 | Enabled |
| 8 | </span> |
| 9 | </div> |
| 10 | <div class="d-flex align-items-center gap-3" data-status> |
| 11 | <div class="form-check form-switch"> |
| 12 | <input class="form-check-input" type="checkbox" style="width:44px;height:24px;--bs-form-switch-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23E0E0E0%27/%3e%3c/svg%3e');--bs-form-switch-checked-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%230A0A0A%27/%3e%3c/svg%3e');background-color:#2A2A3E;border-color:#2A2A3E" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E';this.closest('[data-status]').querySelector('.status-text').textContent=this.checked?'Enabled':'Disabled';this.closest('[data-status]').querySelector('.status-text').style.color=this.checked?'#00FF41':'#606080'"> |
| 13 | </div> |
| 14 | <span class="status-text font-monospace fw-semibold" style="font-size:12px;min-width:64px;color:#606080"> |
| 15 | Disabled |
| 16 | </span> |
| 17 | </div> |
| 18 | </div> |
ℹ
info
Status text should update in real time when the toggle changes. Pair it with aria-live="polite" if the state change affects another region of the page.
Icon Toggle
Toggle switches with inline SVG icons inside the thumb — 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 | } |
untitled.html
HTML
| 1 | <div class="flex gap-5 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <label class="relative inline-block cursor-pointer"> |
| 3 | <input type="checkbox" checked class="absolute opacity-0 w-0 h-0 peer"> |
| 4 | <span class="block w-11 h-6 rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 5 | </span> |
| 6 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-[#606080] peer-checked:bg-white peer-checked:text-[#00FF41] text-[#0A0A0A] flex items-center justify-center transition-all duration-300 peer-checked:translate-x-5"> |
| 7 | <svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="currentColor"> |
| 8 | <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/> |
| 9 | </svg> |
| 10 | </span> |
| 11 | </label> |
| 12 | <label class="relative inline-block cursor-pointer"> |
| 13 | <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer"> |
| 14 | <span class="block w-11 h-6 rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 15 | </span> |
| 16 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-[#606080] peer-checked:bg-white peer-checked:text-[#00FF41] text-[#0A0A0A] flex items-center justify-center transition-all duration-300 peer-checked:translate-x-5"> |
| 17 | <svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 18 | <circle cx="12" cy="12" r="5"/> |
| 19 | <line x1="12" y1="1" x2="12" y2="3"/> |
| 20 | <line x1="12" y1="21" x2="12" y2="23"/> |
| 21 | <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/> |
| 22 | <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/> |
| 23 | <line x1="1" y1="12" x2="3" y2="12"/> |
| 24 | <line x1="21" y1="12" x2="23" y2="12"/> |
| 25 | <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/> |
| 26 | <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/> |
| 27 | </svg> |
| 28 | </span> |
| 29 | </label> |
| 30 | <label class="relative inline-block cursor-pointer"> |
| 31 | <input type="checkbox" checked class="absolute opacity-0 w-0 h-0 peer"> |
| 32 | <span class="block w-11 h-6 rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 33 | </span> |
| 34 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-[#606080] peer-checked:bg-white peer-checked:text-[#00FF41] text-[#0A0A0A] flex items-center justify-center transition-all duration-300 peer-checked:translate-x-5"> |
| 35 | <svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 36 | <path d="M11 5L6 9H2v6h4l5 4V5z"/> |
| 37 | <path d="M19.07 4.93a10 10 0 0 1 0 14.14"/> |
| 38 | <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/> |
| 39 | </svg> |
| 40 | </span> |
| 41 | </label> |
| 42 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-4 align-items-center justify-content-center p-4"> |
| 2 | <div class="form-check form-switch"> |
| 3 | <input class="form-check-input" type="checkbox" checked style="width:44px;height:24px;--bs-form-switch-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23606080%27/%3e%3c/svg%3e');--bs-form-switch-checked-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%2300FF41%27/%3e%3c/svg%3e');background-color:#2A2A3E;border-color:#2A2A3E" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 4 | </div> |
| 5 | <div class="form-check form-switch"> |
| 6 | <input class="form-check-input" type="checkbox" style="width:44px;height:24px;--bs-form-switch-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23606080%27/%3e%3c/svg%3e');--bs-form-switch-checked-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%2300FF41%27/%3e%3c/svg%3e');background-color:#2A2A3E;border-color:#2A2A3E" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 7 | </div> |
| 8 | <div class="form-check form-switch"> |
| 9 | <input class="form-check-input" type="checkbox" checked style="width:44px;height:24px;--bs-form-switch-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23606080%27/%3e%3c/svg%3e');--bs-form-switch-checked-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%2300FF41%27/%3e%3c/svg%3e');background-color:#2A2A3E;border-color:#2A2A3E" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 10 | </div> |
| 11 | </div> |
Sizes
Small, medium, large, and extra-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 | } |
untitled.html
HTML
| 1 | <div class="flex gap-6 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <label class="relative inline-block cursor-pointer w-7 h-4"> |
| 3 | <input type="checkbox" checked class="peer absolute opacity-0 w-0 h-0"> |
| 4 | <span class="block w-full h-full rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 5 | </span> |
| 6 | <span class="absolute top-[2px] left-[2px] w-3 h-3 rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-3"> |
| 7 | </span> |
| 8 | </label> |
| 9 | <label class="relative inline-block cursor-pointer w-10 h-[22px]"> |
| 10 | <input type="checkbox" checked class="peer absolute opacity-0 w-0 h-0"> |
| 11 | <span class="block w-full h-full rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 12 | </span> |
| 13 | <span class="absolute top-[2px] left-[2px] w-[18px] h-[18px] rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-[18px]"> |
| 14 | </span> |
| 15 | </label> |
| 16 | <label class="relative inline-block cursor-pointer w-[52px] h-7"> |
| 17 | <input type="checkbox" checked class="peer absolute opacity-0 w-0 h-0"> |
| 18 | <span class="block w-full h-full rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 19 | </span> |
| 20 | <span class="absolute top-[2px] left-[2px] w-6 h-6 rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-6"> |
| 21 | </span> |
| 22 | </label> |
| 23 | <label class="relative inline-block cursor-pointer w-16 h-[34px]"> |
| 24 | <input type="checkbox" checked class="peer absolute opacity-0 w-0 h-0"> |
| 25 | <span class="block w-full h-full rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 26 | </span> |
| 27 | <span class="absolute top-[2px] left-[2px] w-[30px] h-[30px] rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-[30px]"> |
| 28 | </span> |
| 29 | </label> |
| 30 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-4 align-items-center justify-content-center p-4"> |
| 2 | <div class="form-check form-switch"> |
| 3 | <input class="form-check-input" type="checkbox" checked style="width:28px;height:16px" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 4 | </div> |
| 5 | <div class="form-check form-switch"> |
| 6 | <input class="form-check-input" type="checkbox" checked style="width:40px;height:22px" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 7 | </div> |
| 8 | <div class="form-check form-switch"> |
| 9 | <input class="form-check-input" type="checkbox" checked style="width:52px;height:28px" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 10 | </div> |
| 11 | <div class="form-check form-switch"> |
| 12 | <input class="form-check-input" type="checkbox" checked style="width:64px;height:34px" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 13 | </div> |
| 14 | </div> |
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 | } |
untitled.html
HTML
| 1 | <div class="flex gap-5 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <label class="relative inline-block cursor-pointer"> |
| 3 | <input type="checkbox" checked class="peer absolute opacity-0 w-0 h-0"> |
| 4 | <span class="block w-11 h-6 rounded-full bg-[#22C55E] peer-checked:bg-[#22C55E] transition-colors duration-300"> |
| 5 | </span> |
| 6 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-white shadow-md transition-transform duration-300 peer-checked:translate-x-5"> |
| 7 | </span> |
| 8 | </label> |
| 9 | <label class="relative inline-block cursor-pointer"> |
| 10 | <input type="checkbox" checked class="peer absolute opacity-0 w-0 h-0"> |
| 11 | <span class="block w-11 h-6 rounded-full bg-[#3B82F6] peer-checked:bg-[#3B82F6] transition-colors duration-300"> |
| 12 | </span> |
| 13 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-white shadow-md transition-transform duration-300 peer-checked:translate-x-5"> |
| 14 | </span> |
| 15 | </label> |
| 16 | <label class="relative inline-block cursor-pointer"> |
| 17 | <input type="checkbox" checked class="peer absolute opacity-0 w-0 h-0"> |
| 18 | <span class="block w-11 h-6 rounded-full bg-[#A855F7] peer-checked:bg-[#A855F7] transition-colors duration-300"> |
| 19 | </span> |
| 20 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-white shadow-md transition-transform duration-300 peer-checked:translate-x-5"> |
| 21 | </span> |
| 22 | </label> |
| 23 | <label class="relative inline-block cursor-pointer"> |
| 24 | <input type="checkbox" checked class="peer absolute opacity-0 w-0 h-0"> |
| 25 | <span class="block w-11 h-6 rounded-full bg-[#EF4444] peer-checked:bg-[#EF4444] transition-colors duration-300"> |
| 26 | </span> |
| 27 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-white shadow-md transition-transform duration-300 peer-checked:translate-x-5"> |
| 28 | </span> |
| 29 | </label> |
| 30 | <label class="relative inline-block cursor-pointer"> |
| 31 | <input type="checkbox" checked class="peer absolute opacity-0 w-0 h-0"> |
| 32 | <span class="block w-11 h-6 rounded-full bg-[#F97316] peer-checked:bg-[#F97316] transition-colors duration-300"> |
| 33 | </span> |
| 34 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-white shadow-md transition-transform duration-300 peer-checked:translate-x-5"> |
| 35 | </span> |
| 36 | </label> |
| 37 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-4 align-items-center justify-content-center p-4"> |
| 2 | <div class="form-check form-switch"> |
| 3 | <input class="form-check-input" type="checkbox" checked style="width:44px;height:24px;background-color:#22C55E;border-color:#22C55E" onchange="this.style.backgroundColor=this.checked?'#22C55E':'#2A2A3E';this.style.borderColor=this.checked?'#22C55E':'#2A2A3E'"> |
| 4 | </div> |
| 5 | <div class="form-check form-switch"> |
| 6 | <input class="form-check-input" type="checkbox" checked style="width:44px;height:24px;background-color:#3B82F6;border-color:#3B82F6" onchange="this.style.backgroundColor=this.checked?'#3B82F6':'#2A2A3E';this.style.borderColor=this.checked?'#3B82F6':'#2A2A3E'"> |
| 7 | </div> |
| 8 | <div class="form-check form-switch"> |
| 9 | <input class="form-check-input" type="checkbox" checked style="width:44px;height:24px;background-color:#A855F7;border-color:#A855F7" onchange="this.style.backgroundColor=this.checked?'#A855F7':'#2A2A3E';this.style.borderColor=this.checked?'#A855F7':'#2A2A3E'"> |
| 10 | </div> |
| 11 | <div class="form-check form-switch"> |
| 12 | <input class="form-check-input" type="checkbox" checked style="width:44px;height:24px;background-color:#EF4444;border-color:#EF4444" onchange="this.style.backgroundColor=this.checked?'#EF4444':'#2A2A3E';this.style.borderColor=this.checked?'#EF4444':'#2A2A3E'"> |
| 13 | </div> |
| 14 | <div class="form-check form-switch"> |
| 15 | <input class="form-check-input" type="checkbox" checked style="width:44px;height:24px;background-color:#F97316;border-color:#F97316" onchange="this.style.backgroundColor=this.checked?'#F97316':'#2A2A3E';this.style.borderColor=this.checked?'#F97316':'#2A2A3E'"> |
| 16 | </div> |
| 17 | </div> |
✓
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.
Outline & Soft Variants
Outline toggles use a bordered track for subtle surfaces; soft toggles use tinted backgrounds for low-contrast contexts.
outline-soft
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <label class="toggle outline"> |
| 3 | <input type="checkbox" checked> |
| 4 | <span class="track"> |
| 5 | <span class="thumb"> |
| 6 | </span> |
| 7 | </span> |
| 8 | </label> |
| 9 | <label class="toggle soft"> |
| 10 | <input type="checkbox" checked> |
| 11 | <span class="track"> |
| 12 | <span class="thumb"> |
| 13 | </span> |
| 14 | </span> |
| 15 | </label> |
| 16 | <label class="toggle outline"> |
| 17 | <input type="checkbox"> |
| 18 | <span class="track"> |
| 19 | <span class="thumb"> |
| 20 | </span> |
| 21 | </span> |
| 22 | </label> |
| 23 | <label class="toggle soft"> |
| 24 | <input type="checkbox"> |
| 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 | width:44px; |
| 22 | height:24px; |
| 23 | border-radius:12px; |
| 24 | transition:all .3s ease |
| 25 | } |
| 26 | .thumb { |
| 27 | position:absolute; |
| 28 | top:2px; |
| 29 | left:2px; |
| 30 | width:20px; |
| 31 | height:20px; |
| 32 | background:#E0E0E0; |
| 33 | border-radius:50%; |
| 34 | transition:transform .3s ease; |
| 35 | box-shadow:0 2px 4px rgba(0, |
| 36 | 0, |
| 37 | 0, |
| 38 | .2) |
| 39 | } |
| 40 | .toggle input:checked+.track .thumb { |
| 41 | transform:translateX(20px) |
| 42 | } |
| 43 | .outline .track { |
| 44 | background:transparent; |
| 45 | border:2px solid #2A2A3E |
| 46 | } |
| 47 | .outline input:checked+.track { |
| 48 | border-color:#00FF41; |
| 49 | background:rgba(0, |
| 50 | 255, |
| 51 | 65, |
| 52 | .1) |
| 53 | } |
| 54 | .soft .track { |
| 55 | background:rgba(0, |
| 56 | 255, |
| 57 | 65, |
| 58 | .15) |
| 59 | } |
| 60 | .soft input:checked+.track { |
| 61 | background:#00FF41 |
| 62 | } |
untitled.html
HTML
| 1 | <div class="flex gap-6 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <label class="relative inline-block cursor-pointer"> |
| 3 | <input type="checkbox" checked class="peer absolute opacity-0 w-0 h-0"> |
| 4 | <span class="block w-11 h-6 rounded-full bg-transparent border-2 border-[#00FF41] peer-checked:bg-[rgba(0,255,65,0.1)] transition-all duration-300"> |
| 5 | </span> |
| 6 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-5"> |
| 7 | </span> |
| 8 | </label> |
| 9 | <label class="relative inline-block cursor-pointer"> |
| 10 | <input type="checkbox" checked class="peer absolute opacity-0 w-0 h-0"> |
| 11 | <span class="block w-11 h-6 rounded-full bg-[rgba(0,255,65,0.15)] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 12 | </span> |
| 13 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-5"> |
| 14 | </span> |
| 15 | </label> |
| 16 | <label class="relative inline-block cursor-pointer"> |
| 17 | <input type="checkbox" class="peer absolute opacity-0 w-0 h-0"> |
| 18 | <span class="block w-11 h-6 rounded-full bg-transparent border-2 border-[#2A2A3E] peer-checked:border-[#00FF41] peer-checked:bg-[rgba(0,255,65,0.1)] transition-all duration-300"> |
| 19 | </span> |
| 20 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-5"> |
| 21 | </span> |
| 22 | </label> |
| 23 | <label class="relative inline-block cursor-pointer"> |
| 24 | <input type="checkbox" class="peer absolute opacity-0 w-0 h-0"> |
| 25 | <span class="block w-11 h-6 rounded-full bg-[rgba(0,255,65,0.15)] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 26 | </span> |
| 27 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-5"> |
| 28 | </span> |
| 29 | </label> |
| 30 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-4 align-items-center justify-content-center p-4"> |
| 2 | <div class="form-check form-switch"> |
| 3 | <input class="form-check-input" type="checkbox" checked style="width:44px;height:24px;background-color:transparent;border:2px solid #00FF41" onchange="this.style.backgroundColor=this.checked?'rgba(0,255,65,0.1)':'transparent';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 4 | </div> |
| 5 | <div class="form-check form-switch"> |
| 6 | <input class="form-check-input" type="checkbox" checked style="width:44px;height:24px;background-color:rgba(0,255,65,0.15);border-color:rgba(0,255,65,0.15)" onchange="this.style.backgroundColor=this.checked?'#00FF41':'rgba(0,255,65,0.15)';this.style.borderColor=this.checked?'#00FF41':'rgba(0,255,65,0.15)'"> |
| 7 | </div> |
| 8 | <div class="form-check form-switch"> |
| 9 | <input class="form-check-input" type="checkbox" style="width:44px;height:24px;background-color:transparent;border:2px solid #2A2A3E" onchange="this.style.backgroundColor=this.checked?'rgba(0,255,65,0.1)':'transparent';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 10 | </div> |
| 11 | <div class="form-check form-switch"> |
| 12 | <input class="form-check-input" type="checkbox" style="width:44px;height:24px;background-color:rgba(0,255,65,0.15);border-color:rgba(0,255,65,0.15)" onchange="this.style.backgroundColor=this.checked?'#00FF41':'rgba(0,255,65,0.15)';this.style.borderColor=this.checked?'#00FF41':'rgba(0,255,65,0.15)'"> |
| 13 | </div> |
| 14 | </div> |
Disabled States
Disabled toggles that cannot be interacted with — dimmed appearance signals a 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 | } |
untitled.html
HTML
| 1 | <div class="flex gap-8 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <label class="inline-flex items-center gap-2.5 cursor-not-allowed opacity-50"> |
| 3 | <span class="relative inline-block"> |
| 4 | <input type="checkbox" disabled class="absolute opacity-0 w-0 h-0 peer"> |
| 5 | <span class="block w-11 h-6 rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41]/60 transition-colors duration-300"> |
| 6 | </span> |
| 7 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-5"> |
| 8 | </span> |
| 9 | </span> |
| 10 | <span class="text-xs text-[#606080] select-none"> |
| 11 | Off & Disabled |
| 12 | </span> |
| 13 | </label> |
| 14 | <label class="inline-flex items-center gap-2.5 cursor-not-allowed opacity-50"> |
| 15 | <span class="relative inline-block"> |
| 16 | <input type="checkbox" checked disabled class="absolute opacity-0 w-0 h-0 peer"> |
| 17 | <span class="block w-11 h-6 rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41]/60 transition-colors duration-300"> |
| 18 | </span> |
| 19 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-5"> |
| 20 | </span> |
| 21 | </span> |
| 22 | <span class="text-xs text-[#606080] select-none"> |
| 23 | On & Disabled |
| 24 | </span> |
| 25 | </label> |
| 26 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-4 align-items-center justify-content-center p-4"> |
| 2 | <div class="d-flex align-items-center gap-2 opacity-50"> |
| 3 | <div class="form-check form-switch"> |
| 4 | <input class="form-check-input" type="checkbox" disabled style="width:44px;height:24px;background-color:#2A2A3E;border-color:#2A2A3E"> |
| 5 | </div> |
| 6 | <span style="font-size:12px;color:#606080"> |
| 7 | Off & Disabled |
| 8 | </span> |
| 9 | </div> |
| 10 | <div class="d-flex align-items-center gap-2 opacity-50"> |
| 11 | <div class="form-check form-switch"> |
| 12 | <input class="form-check-input" type="checkbox" checked disabled style="width:44px;height:24px;background-color:#00FF41;border-color:#00FF41;opacity:.6"> |
| 13 | </div> |
| 14 | <span style="font-size:12px;color:#606080"> |
| 15 | On & Disabled |
| 16 | </span> |
| 17 | </div> |
| 18 | </div> |
⚠
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.
Loading State
Toggles with a spinner inside the thumb 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 | } |
untitled.html
HTML
| 1 | <div class="flex gap-6 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <label class="relative inline-block cursor-pointer pointer-events-none"> |
| 3 | <input type="checkbox" checked class="absolute opacity-0 w-0 h-0 peer"> |
| 4 | <span class="block w-11 h-6 rounded-full bg-[#2A2A3E] opacity-70 peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 5 | </span> |
| 6 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-transparent flex items-center justify-center animate-spin text-[#E0E0E0] peer-checked:text-[#0A0A0A] transition-colors duration-300"> |
| 7 | <svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 8 | <circle cx="12" cy="12" r="10" stroke-dasharray="31.42" stroke-dashoffset="10"/> |
| 9 | </svg> |
| 10 | </span> |
| 11 | </label> |
| 12 | <label class="relative inline-block cursor-pointer pointer-events-none"> |
| 13 | <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer"> |
| 14 | <span class="block w-11 h-6 rounded-full bg-[#2A2A3E] opacity-70 peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 15 | </span> |
| 16 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-transparent flex items-center justify-center animate-spin text-[#E0E0E0] peer-checked:text-[#0A0A0A] transition-colors duration-300"> |
| 17 | <svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> |
| 18 | <circle cx="12" cy="12" r="10" stroke-dasharray="31.42" stroke-dashoffset="20"/> |
| 19 | </svg> |
| 20 | </span> |
| 21 | </label> |
| 22 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-4 align-items-center justify-content-center p-4"> |
| 2 | <div class="form-check form-switch"> |
| 3 | <input class="form-check-input" type="checkbox" checked disabled style="width:44px;height:24px;background-color:#00FF41;border-color:#00FF41;opacity:.7"> |
| 4 | <span class="spinner-border spinner-border-sm position-absolute" style="width:10px;height:10px;color:#0A0A0A;margin-left:-26px;margin-top:7px" role="status" aria-hidden="true"> |
| 5 | </span> |
| 6 | </div> |
| 7 | <div class="form-check form-switch"> |
| 8 | <input class="form-check-input" type="checkbox" disabled style="width:44px;height:24px;background-color:#2A2A3E;border-color:#2A2A3E;opacity:.7"> |
| 9 | <span class="spinner-border spinner-border-sm position-absolute" style="width:10px;height:10px;color:#E0E0E0;margin-left:-26px;margin-top:7px" role="status" aria-hidden="true"> |
| 10 | </span> |
| 11 | </div> |
| 12 | </div> |
🔥
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 Settings Card
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:380px; |
| 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 #151515 |
| 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:#151515; |
| 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 | } |
untitled.html
HTML
| 1 | <div class="max-w-sm mx-auto my-4 border border-[#1A1A2E] rounded-xl bg-[#0A0A0F] overflow-hidden"> |
| 2 | <div class="px-5 py-4 border-b border-[#151515]"> |
| 3 | <h3 class="text-sm text-[#E0E0E0] font-semibold m-0"> |
| 4 | Settings |
| 5 | </h3> |
| 6 | </div> |
| 7 | <div class="py-2"> |
| 8 | <div class="px-5 py-2 text-[10px] uppercase tracking-widest text-[#00FF41] font-semibold"> |
| 9 | Appearance |
| 10 | </div> |
| 11 | <label class="flex items-center justify-between px-5 py-2.5 text-[13px] text-[#C0C0C0] hover:bg-white/[0.02] cursor-pointer transition-colors"> |
| 12 | <span> |
| 13 | Dark Mode |
| 14 | </span> |
| 15 | <span class="relative inline-block cursor-pointer flex-shrink-0"> |
| 16 | <input type="checkbox" checked class="absolute opacity-0 w-0 h-0 peer"> |
| 17 | <span class="block w-10 h-[22px] rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 18 | </span> |
| 19 | <span class="absolute top-[2px] left-[2px] w-[18px] h-[18px] rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-[18px]"> |
| 20 | </span> |
| 21 | </span> |
| 22 | </label> |
| 23 | <label class="flex items-center justify-between px-5 py-2.5 text-[13px] text-[#C0C0C0] hover:bg-white/[0.02] cursor-pointer transition-colors"> |
| 24 | <span> |
| 25 | Compact View |
| 26 | </span> |
| 27 | <span class="relative inline-block cursor-pointer flex-shrink-0"> |
| 28 | <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer"> |
| 29 | <span class="block w-10 h-[22px] rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 30 | </span> |
| 31 | <span class="absolute top-[2px] left-[2px] w-[18px] h-[18px] rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-[18px]"> |
| 32 | </span> |
| 33 | </span> |
| 34 | </label> |
| 35 | <label class="flex items-center justify-between px-5 py-2.5 text-[13px] text-[#C0C0C0] hover:bg-white/[0.02] cursor-pointer transition-colors"> |
| 36 | <span> |
| 37 | Animations |
| 38 | </span> |
| 39 | <span class="relative inline-block cursor-pointer flex-shrink-0"> |
| 40 | <input type="checkbox" checked class="absolute opacity-0 w-0 h-0 peer"> |
| 41 | <span class="block w-10 h-[22px] rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 42 | </span> |
| 43 | <span class="absolute top-[2px] left-[2px] w-[18px] h-[18px] rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-[18px]"> |
| 44 | </span> |
| 45 | </span> |
| 46 | </label> |
| 47 | <div class="h-px bg-[#151515] my-1"> |
| 48 | </div> |
| 49 | <div class="px-5 py-2 text-[10px] uppercase tracking-widest text-[#00FF41] font-semibold"> |
| 50 | Privacy |
| 51 | </div> |
| 52 | <label class="flex items-center justify-between px-5 py-2.5 text-[13px] text-[#C0C0C0] hover:bg-white/[0.02] cursor-pointer transition-colors"> |
| 53 | <span> |
| 54 | Public Profile |
| 55 | </span> |
| 56 | <span class="relative inline-block cursor-pointer flex-shrink-0"> |
| 57 | <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer"> |
| 58 | <span class="block w-10 h-[22px] rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 59 | </span> |
| 60 | <span class="absolute top-[2px] left-[2px] w-[18px] h-[18px] rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-[18px]"> |
| 61 | </span> |
| 62 | </span> |
| 63 | </label> |
| 64 | <label class="flex items-center justify-between px-5 py-2.5 text-[13px] text-[#C0C0C0] hover:bg-white/[0.02] cursor-pointer transition-colors"> |
| 65 | <span> |
| 66 | Activity Status |
| 67 | </span> |
| 68 | <span class="relative inline-block cursor-pointer flex-shrink-0"> |
| 69 | <input type="checkbox" checked class="absolute opacity-0 w-0 h-0 peer"> |
| 70 | <span class="block w-10 h-[22px] rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 71 | </span> |
| 72 | <span class="absolute top-[2px] left-[2px] w-[18px] h-[18px] rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-[18px]"> |
| 73 | </span> |
| 74 | </span> |
| 75 | </label> |
| 76 | </div> |
| 77 | </div> |
untitled.html
HTML
| 1 | <div class="card mx-auto border-secondary" style="max-width:380px;background:#0A0A0F"> |
| 2 | <div class="card-header border-secondary bg-transparent"> |
| 3 | <h5 class="card-title m-0" style="font-size:14px;color:#E0E0E0"> |
| 4 | Settings |
| 5 | </h5> |
| 6 | </div> |
| 7 | <div class="list-group list-group-flush"> |
| 8 | <div class="list-group-item bg-transparent border-secondary text-secondary" style="font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#00FF41"> |
| 9 | Appearance |
| 10 | </div> |
| 11 | <label class="list-group-item d-flex justify-content-between align-items-center bg-transparent border-secondary text-[#C0C0C0]" style="font-size:13px"> |
| 12 | Dark Mode |
| 13 | <div class="form-check form-switch"> |
| 14 | <input class="form-check-input" type="checkbox" checked style="width:40px;height:22px;--bs-form-switch-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23E0E0E0%27/%3e%3c/svg%3e');--bs-form-switch-checked-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%230A0A0A%27/%3e%3c/svg%3e');background-color:#2A2A3E;border-color:#2A2A3E" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 15 | </div> |
| 16 | </label> |
| 17 | <label class="list-group-item d-flex justify-content-between align-items-center bg-transparent border-secondary text-[#C0C0C0]" style="font-size:13px"> |
| 18 | Compact View |
| 19 | <div class="form-check form-switch"> |
| 20 | <input class="form-check-input" type="checkbox" style="width:40px;height:22px;--bs-form-switch-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23E0E0E0%27/%3e%3c/svg%3e');--bs-form-switch-checked-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%230A0A0A%27/%3e%3c/svg%3e');background-color:#2A2A3E;border-color:#2A2A3E" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 21 | </div> |
| 22 | </label> |
| 23 | <label class="list-group-item d-flex justify-content-between align-items-center bg-transparent border-secondary text-[#C0C0C0]" style="font-size:13px"> |
| 24 | Animations |
| 25 | <div class="form-check form-switch"> |
| 26 | <input class="form-check-input" type="checkbox" checked style="width:40px;height:22px;--bs-form-switch-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23E0E0E0%27/%3e%3c/svg%3e');--bs-form-switch-checked-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%230A0A0A%27/%3e%3c/svg%3e');background-color:#2A2A3E;border-color:#2A2A3E" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 27 | </div> |
| 28 | </label> |
| 29 | <div class="list-group-item bg-transparent border-secondary text-secondary" style="font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#00FF41"> |
| 30 | Privacy |
| 31 | </div> |
| 32 | <label class="list-group-item d-flex justify-content-between align-items-center bg-transparent border-secondary text-[#C0C0C0]" style="font-size:13px"> |
| 33 | Public Profile |
| 34 | <div class="form-check form-switch"> |
| 35 | <input class="form-check-input" type="checkbox" style="width:40px;height:22px;--bs-form-switch-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23E0E0E0%27/%3e%3c/svg%3e');--bs-form-switch-checked-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%230A0A0A%27/%3e%3c/svg%3e');background-color:#2A2A3E;border-color:#2A2A3E" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 36 | </div> |
| 37 | </label> |
| 38 | <label class="list-group-item d-flex justify-content-between align-items-center bg-transparent border-secondary text-[#C0C0C0]" style="font-size:13px"> |
| 39 | Activity Status |
| 40 | <div class="form-check form-switch"> |
| 41 | <input class="form-check-input" type="checkbox" checked style="width:40px;height:22px;--bs-form-switch-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23E0E0E0%27/%3e%3c/svg%3e');--bs-form-switch-checked-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%230A0A0A%27/%3e%3c/svg%3e');background-color:#2A2A3E;border-color:#2A2A3E" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 42 | </div> |
| 43 | </label> |
| 44 | </div> |
| 45 | </div> |
📝
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.
Segmented Control
A pill-style segmented control with an animated sliding indicator for mutually exclusive options.
segmented-control
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="segmented"> |
| 3 | <button class="active"> |
| 4 | List |
| 5 | </button> |
| 6 | <button> |
| 7 | Grid |
| 8 | </button> |
| 9 | <button> |
| 10 | Map |
| 11 | </button> |
| 12 | </div> |
| 13 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | align-items:center; |
| 4 | justify-content:center; |
| 5 | padding:32px |
| 6 | } |
| 7 | .segmented { |
| 8 | position:relative; |
| 9 | display:inline-flex; |
| 10 | background:#0A0A0F; |
| 11 | border-radius:999px; |
| 12 | border:1px solid #2A2A3E; |
| 13 | padding:3px; |
| 14 | gap:3px |
| 15 | } |
| 16 | .segmented button { |
| 17 | position:relative; |
| 18 | z-index:1; |
| 19 | padding:8px 20px; |
| 20 | font-size:12px; |
| 21 | font-weight:500; |
| 22 | font-family:system-ui, |
| 23 | sans-serif; |
| 24 | cursor:pointer; |
| 25 | border:none; |
| 26 | background:transparent; |
| 27 | color:#606080; |
| 28 | border-radius:999px; |
| 29 | transition:color .2s ease |
| 30 | } |
| 31 | .segmented button.active { |
| 32 | color:#0A0A0A; |
| 33 | font-weight:600 |
| 34 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('.segmented').forEach(g=>{const buttons=g.querySelectorAll('button');const indicator=document.createElement('span');indicator.className='indicator';const css=document.createElement('style');css.textContent='.indicator{position:absolute;top:3px;left:3px;height:calc(100% - 6px);background:#00FF41;border-radius:999px;transition:all .25s ease;z-index:0;box-shadow:0 2px 8px rgba(0,255,65,.2)}';document.head.appendChild(css);g.appendChild(indicator);const move=()=>{const active=g.querySelector('.active');indicator.style.width=active.offsetWidth+'px';indicator.style.transform='translateX('+(active.offsetLeft-3)+'px)'};move();buttons.forEach(b=>b.addEventListener('click',()=>{buttons.forEach(x=>x.classList.remove('active'));b.classList.add('active');move()}))}) |
untitled.html
HTML
| 1 | <div class="flex items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <div class="relative inline-flex bg-[#0A0A0F] rounded-full border border-[#2A2A3E] p-1 gap-1" data-segmented> |
| 3 | <button class="relative z-10 px-5 py-2 text-xs font-medium rounded-full text-[#0A0A0A] font-semibold transition-colors"> |
| 4 | List |
| 5 | </button> |
| 6 | <button class="relative z-10 px-5 py-2 text-xs font-medium rounded-full text-[#606080] hover:text-[#C0C0C0] transition-colors"> |
| 7 | Grid |
| 8 | </button> |
| 9 | <button class="relative z-10 px-5 py-2 text-xs font-medium rounded-full text-[#606080] hover:text-[#C0C0C0] transition-colors"> |
| 10 | Map |
| 11 | </button> |
| 12 | </div> |
| 13 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex align-items-center justify-content-center p-4"> |
| 2 | <div class="btn-group rounded-pill border-secondary p-1" role="group" aria-label="View" style="background:#0A0A0F;border:1px solid #2A2A3E;gap:3px"> |
| 3 | <button class="btn btn-success rounded-pill active fw-semibold" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41"> |
| 4 | List |
| 5 | </button> |
| 6 | <button class="btn btn-outline-dark rounded-pill border-0 text-secondary"> |
| 7 | Grid |
| 8 | </button> |
| 9 | <button class="btn btn-outline-dark rounded-pill border-0 text-secondary"> |
| 10 | Map |
| 11 | </button> |
| 12 | </div> |
| 13 | </div> |
✓
best practice
Toggle button groups and segmented controls 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 | } |
untitled.html
HTML
| 1 | <div class="flex gap-6 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <label class="inline-flex items-center gap-3 cursor-pointer"> |
| 3 | <span class="relative inline-block"> |
| 4 | <input type="checkbox" checked class="peer absolute opacity-0 w-0 h-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#00FF41] focus-visible:ring-offset-2 focus-visible:ring-offset-[#0A0A0A] rounded-full"> |
| 5 | <span class="block w-11 h-6 rounded-full bg-[#2A2A3E] peer-checked:bg-[#00FF41] transition-colors duration-300"> |
| 6 | </span> |
| 7 | <span class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-[#E0E0E0] shadow-md transition-transform duration-300 peer-checked:translate-x-5"> |
| 8 | </span> |
| 9 | </span> |
| 10 | <span class="text-xs text-[#A0A0A0]"> |
| 11 | Tab to me, press Space |
| 12 | </span> |
| 13 | </label> |
| 14 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-4 align-items-center justify-content-center p-4"> |
| 2 | <label class="d-flex align-items-center gap-3 cursor-pointer text-[#A0A0A0]" style="font-size:12px"> |
| 3 | <div class="form-check form-switch"> |
| 4 | <input class="form-check-input" type="checkbox" checked style="width:44px;height:24px;--bs-form-switch-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23E0E0E0%27/%3e%3c/svg%3e');--bs-form-switch-checked-bg:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%230A0A0A%27/%3e%3c/svg%3e');background-color:#2A2A3E;border-color:#2A2A3E" onchange="this.style.backgroundColor=this.checked?'#00FF41':'#2A2A3E';this.style.borderColor=this.checked?'#00FF41':'#2A2A3E'"> |
| 5 | </div> |
| 6 | Tab to me, press Space |
| 7 | </label> |
| 8 | </div> |
ℹ
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.
Accessibility
Toggles must communicate state to everyone, including screen-reader users and keyboard navigators. Use the native checkbox as the control primitive and layer visual styling on top.
- Keep the real <input type="checkbox"> in the DOM; never replace it with a div alone.
- Wrap the toggle and its label in a <label> so clicking the text toggles the input.
- Use aria-checked only if you build a custom ARIA switch role; otherwise the checkbox state is announced automatically.
- Ensure focus styles are visible (outline or ring) on the styled track.
- Provide visible status text like "On / Off" or "Enabled / Disabled" when the context is ambiguous.
- Disabled toggles should use the disabled attribute, not just visual dimming.
- When state changes affect another region, mark that region with aria-live="polite".
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.