Switch

The switch component is an easy-to-use UI element that can be added anywhere in your layout, allowing users to toggle options quickly and intuitively.

src/pages/index.astro

---
// Import
import Switch from "../components/Switch.astro";
---
(...)
<Switch />
(...)

---

1. Switch

Preview

Code

src/components/Switch.astro

---
//0 Instructions in this component
---

<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" value="" class="sr-only peer" />
  <div class="w-14 h-8 bg-gray-900 peer-focus:outline-none rounded-full"></div>
  <div
    class="absolute left-1 top-1 bg-gray-950 w-6 h-6 rounded-full transition-all peer-checked:translate-x-full peer-checked:bg-tertiary"
  >
  </div>
</label>