Settings toggle.

The component#

html
<label class="inline-flex cursor-pointer items-center"><input type="checkbox" class="peer sr-only" /><span class="relative h-6 w-11 rounded-full bg-slate-300 transition peer-checked:bg-blue-600 after:absolute after:start-0.5 after:top-0.5 after:size-5 after:rounded-full after:bg-white after:transition peer-checked:after:translate-x-5"></span></label>

Responsive & dark#

Add dark: twins to every surface and text color (bg-white dark:bg-slate-900, border-slate-200 dark:border-slate-800). Because this recipe is pure utilities, dark mode is a per-class decision — see concepts/dark-mode-strategies|dark mode strategies.

Customization#

  • Swap palette classes to re-theme instantly
  • Adjust radii (rounded-lg → rounded-2xl) for tone
  • Add transition + state variants for polish
  • Extract into a framework component when reused 3+ times

recipes/index|Recipe index · components/index|Design components