Application Radio Groups Color variant

<fieldset class="flex flex-wrap gap-3">
      <legend class="sr-only">Color</legend>

      <label
        for="ColorBlack"
        class="block size-8 rounded-full bg-black shadow-sm has-checked:ring-2 has-checked:ring-black has-checked:ring-offset-2"
      >
        <input
          type="radio"
          name="ColorOption"
          value="ColorBlack"
          id="ColorBlack"
          class="sr-only"
          checked
        />

        <span class="sr-only">Black</span>
      </label>

      <label
        for="ColorRed"
        class="block size-8 rounded-full bg-red-500 shadow-sm has-checked:ring-2 has-checked:ring-red-500 has-checked:ring-offset-2"
      >
        <input type="radio" name="ColorOption" value="ColorRed" id="ColorRed" class="sr-only" />

        <span class="sr-only">Red</span>
      </label>

      <label
        for="ColorBlue"
        class="block size-8 rounded-full bg-blue-500 shadow-sm has-checked:ring-2 has-checked:ring-blue-500 has-checked:ring-offset-2"
      >
        <input type="radio" name="ColorOption" value="ColorBlue" id="ColorBlue" class="sr-only" />

        <span class="sr-only">Blue</span>
      </label>

      <label
        for="ColorGold"
        class="block size-8 rounded-full bg-amber-500 shadow-sm has-checked:ring-2 has-checked:ring-amber-500 has-checked:ring-offset-2"
      >
        <input type="radio" name="ColorOption" value="ColorGold" id="ColorGold" class="sr-only" />

        <span class="sr-only">Gold</span>
      </label>
    </fieldset>