<div class="flex flex-col gap-y-4 m-16">
<button id="toggle-switch" type="button" role="switch" aria-checked="false" class="group flex w-14 h-8 p-1 rounded-full bg-slate-400 transition-colors duration-200 ease-in-out overflow-hidden outline-none focus-visible:ring focus-visible:ring-purple-400 aria-checked:bg-blue-400">
<span class="w-6 h-6 rounded-full bg-white transition-transform duration-200 ease-in-out group-aria-checked:translate-x-full"></span>
</button>
<label id="toggle-switch-label" for="toggle-switch">
Switch off
</label>
</div>
const btn = document.getElementById('toggle-switch');
const btnLabel = document.getElementById('toggle-switch-label');
btn.addEventListener("click", function() {
if (btn.getAttribute("aria-checked") === "true") {
btn.setAttribute("aria-checked", "false");
btnLabel.innerHTML = "Switch off"
} else {
btn.setAttribute("aria-checked", "true");
btnLabel.innerHTML = "Switch on"
}
});
