Switch

<label class="inline-flex cursor-pointer items-center">
  <input class="peer sr-only" type="checkbox" />
  <div
    class="peer relative h-6 w-11 rounded-full bg-muted shadow-sm after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-primary-text after:transition-all after:content-[''] peer-checked:bg-primary peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-disabled:cursor-not-allowed peer-disabled:opacity-80 peer-disabled:after:opacity-80 rtl:peer-checked:after:-translate-x-full"
  ></div>
</label>