Switch (Toggle)

Toggle switches are a pleasant interface for toggling a value between two states, and offer the same semantics and keyboard navigation as native checkbox elements.

Open in separate tab


<script lang="ts">
  import { createSwitch } from 'svelte-headlessui'

  const sw = createSwitch({ label: 'Set Preference' })

<div class="flex w-full flex-col items-center justify-center py-16">
    class="relative inline-flex h-[38px] w-[74px] shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-teal-700 transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
    <span class="sr-only">Use setting</span>
        ? 'translate-x-9'
        : 'translate-x-0'} pointer-events-none inline-block h-[34px] w-[34px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"