Segmented Control

<!--
  An exclusive pick is a radio group, not a row of buttons - so a real
  <fieldset>/<legend> with radios gives arrow-key roving and a single-selection
  announcement for free. The chosen segment reads by FILL + shadow + weight, not
  hue: peer-checked paints a raised white pill that is obvious in greyscale.
-->
<fieldset class="inline-flex w-full max-w-xs rounded-lg bg-gray-100 p-1 dark:bg-gray-800">
  <legend class="sr-only">View density</legend>
  <label class="flex-1">
    <input type="radio" name="density" value="comfortable" class="peer sr-only" checked />
    <span class="flex cursor-pointer items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium text-gray-600 transition-colors peer-checked:bg-white peer-checked:font-semibold peer-checked:text-gray-900 peer-checked:shadow-sm peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-blue-600 dark:text-gray-300 dark:peer-checked:bg-gray-950 dark:peer-checked:text-white">Comfortable</span>
  </label>
  <label class="flex-1">
    <input type="radio" name="density" value="compact" class="peer sr-only" />
    <span class="flex cursor-pointer items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium text-gray-600 transition-colors peer-checked:bg-white peer-checked:font-semibold peer-checked:text-gray-900 peer-checked:shadow-sm peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-blue-600 dark:text-gray-300 dark:peer-checked:bg-gray-950 dark:peer-checked:text-white">Compact</span>
  </label>
</fieldset>