CSS
Install
Use this as a template path now; later it can map to a real registry package.
pnpm dlx shadcn@latest add @squadkode/ui-lab/signal-toggleUsage (with your settings)
A compact React example generated from this template data.
import "./signal-toggle.css"; export function SignalToggle() { return ( <label className="sk-signal-toggle"> <input type="checkbox" aria-label="Toggle signal mode" /> <span><i /></span> </label> );}Code
Switch between HTML, CSS, TSX, and Astro versions.
<label class="sk-signal-toggle"> <input type="checkbox" aria-label="Toggle signal mode" /> <span> <i></i> </span></label>.sk-signal-toggle { --size: 84px; display: inline-grid; place-items: center;} .sk-signal-toggle input { position: absolute; opacity: 0;} .sk-signal-toggle span { width: var(--size); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #d5abff; background: linear-gradient(145deg, #252b35, #0c0f15); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.14);} .sk-signal-toggle i { width: 26px; height: 18px; border: 3px solid currentColor; border-left-color: transparent; border-right-color: transparent; border-bottom: 0; border-radius: 26px 26px 0 0;} .sk-signal-toggle input:checked + span { color: #d5abff; background: linear-gradient(145deg, #1d2734, #090d13);}import "./signal-toggle.css"; export function SignalToggle() { return ( <label className="sk-signal-toggle"> <input type="checkbox" aria-label="Toggle signal mode" /> <span><i /></span> </label> );}---// Signal Toggle--- <label class="sk-signal-toggle"> <input type="checkbox" aria-label="Toggle signal mode" /> <span> <i></i> </span></label> <style>.sk-signal-toggle { --size: 84px; display: inline-grid; place-items: center;} .sk-signal-toggle input { position: absolute; opacity: 0;} .sk-signal-toggle span { width: var(--size); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #d5abff; background: linear-gradient(145deg, #252b35, #0c0f15); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.14);} .sk-signal-toggle i { width: 26px; height: 18px; border: 3px solid currentColor; border-left-color: transparent; border-right-color: transparent; border-bottom: 0; border-radius: 26px 26px 0 0;} .sk-signal-toggle input:checked + span { color: #d5abff; background: linear-gradient(145deg, #1d2734, #090d13);}</style>Copy Prompt
Use this prompt to recreate or extend the element with the same intent.
Create a polished Signal Toggle component for a modern Astro or React website. Requirements: - Match the SquadKode visual system with clean spacing, 8px card radius, accessible labels, and responsive behavior. - Provide HTML, CSS, TSX, and Astro versions. - Keep the component lightweight, semantic, and easy to copy into a production page. - Include notes for accessibility, reduced motion, and where this pattern works best. Context: A circular signal switch with a tactile dark surface and soft active state.
Variations
2 related patterns from this category.
Implementation Notes
Small details that make this template useful in production pages.
Pure HTML and CSS
Accessible checkbox input
Works well for settings panels