Radio Group

Native radios in a fieldset — the selected dot is a border-width trick, and arrow-key navigation is the platform's roving tabindex.

plain CSS — works everywhere

PreviewCode

<fieldset class="grid gap-2.5">
  <legend class="mb-2 text-sm font-medium">Density</legend>
  <label class="flex cursor-pointer items-center gap-2.5 text-sm">
    <input
      type="radio"
      name="rg-density"
      checked
      class="size-4 cursor-pointer appearance-none rounded-full border border-input bg-background transition-[border-width,border-color] checked:border-[5px] checked:border-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
    />
    Comfortable
  </label>
  <label class="flex cursor-pointer items-center gap-2.5 text-sm">
    <input
      type="radio"
      name="rg-density"
      class="size-4 cursor-pointer appearance-none rounded-full border border-input bg-background transition-[border-width,border-color] checked:border-[5px] checked:border-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
    />
    Compact
  </label>
  <label class="flex cursor-pointer items-center gap-2.5 text-sm">
    <input
      type="radio"
      name="rg-density"
      class="size-4 cursor-pointer appearance-none rounded-full border border-input bg-background transition-[border-width,border-color] checked:border-[5px] checked:border-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
    />
    Cozy
  </label>
</fieldset>

How it works

The dot is checked:border-[5px] — the thick primary border leaves a background-colored hole in the middle. No pseudo-element needed.
<fieldset> + <legend> group the options for screen readers.
Arrow keys move selection within the group and Tab treats it as one stop — that’s native radio behavior JS libraries reimplement as “roving tabindex”.