Labeled Switch

<!--
  ON/OFF text lives INSIDE the track so the state reads in pure greyscale. Note
  every visual layer is a direct sibling of the input: peer-checked only reaches
  siblings of the peer, never descendants of a sibling, so the track, both
  labels and the thumb sit flat next to the checkbox. The input carries the
  accessible name via aria-label; the printed On/Off are decorative.
-->
<div class="inline-flex items-center gap-3">
  <label class="relative inline-flex h-7 w-16 shrink-0 cursor-pointer items-center">
    <input type="checkbox" role="switch" aria-label="Wi-Fi" class="peer sr-only" checked />
    <span
      aria-hidden="true"
      class="absolute inset-0 rounded-full bg-gray-400 transition-colors peer-checked:bg-blue-600 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-blue-600 dark:bg-gray-600 dark:peer-checked:bg-blue-500 dark:peer-focus-visible:outline-blue-400"
    ></span>
    <span aria-hidden="true" class="pointer-events-none absolute left-2 text-[0.625rem] font-bold uppercase tracking-wide text-white opacity-0 peer-checked:opacity-100">On</span>
    <span aria-hidden="true" class="pointer-events-none absolute right-2 text-[0.625rem] font-bold uppercase tracking-wide text-gray-700 peer-checked:opacity-0 dark:text-gray-100">Off</span>
    <span aria-hidden="true" class="pointer-events-none absolute left-1 h-5 w-5 rounded-full bg-white shadow transition-transform peer-checked:translate-x-9 motion-reduce:transition-none"></span>
  </label>
  <span class="text-sm font-medium text-gray-900 dark:text-gray-100">Wi-Fi</span>
</div>