Radio buttons

<form class="max-w-xs">
    <fieldset>
      <legend class="leading-snug max-w-56 mb-3">Select one historical figure</legend>
      <div class="space-y-2">
      {% for radio in radios %}
        {% set radio_id = 'radio-' ~ random() %}
        <label for="{{ radio_id }}" class="flex">
          <input
            {{ radio.isDisabled == true ? 'disabled' : null }}
            id="{{ radio_id }}"
            type="radio"
            value="{{ radio.value }}"
            name="historical-figures"
            class="sr-only peer"
          />
          <div class="flex items-center justify-center top-0.5 shrink-0 relative cursor-pointer text-blue-60v border-none size-5 rounded-full ring-2 ring-offset-0 ring-gray-90 peer-focus:ring-2 peer-focus:ring-offset-0 peer-focus:ring-gray-90 peer-focus:outline peer-focus:outline-4 peer-focus:outline-offset-4 peer-focus:outline-blue-40v peer-disabled:ring-gray-50 peer-disabled:cursor-not-allowed peer-disabled:peer-checked:text-gray-50 peer-checked:ring-blue-60v peer-focus:peer-checked:ring-blue-60v before:size-4 before:block before:rounded-full before:peer-checked:bg-blue-60v before:peer-checked:peer-disabled:bg-gray-50"></div>
          <div class="pl-3 cursor-pointer block peer-disabled:text-gray-60 peer-disabled:cursor-not-allowed">
            {{- radio.label -}}
          </div>
        </label>
      {% endfor %}
      </div>
    </fieldset>
  </form>

<form class="max-w-xs">
    <fieldset>
      <legend class="leading-snug max-w-56 mb-3">Select any historical figure</legend>
      <div class="space-y-2">
      {% for radio in radios %}
        {% set radio_id = 'radio-' ~ random() %}
        <label for="{{ radio_id }}" class="flex relative z-0 px-3 py-4">
          <input
            {{ radio.isDisabled == true ? 'disabled' : null }}
            id="{{ radio_id }}"
            type="radio"
            value="{{ radio.value }}"
            name="historical-figures"
            class="sr-only peer"
          />
          <div class="flex items-center justify-center top-0.5 shrink-0 relative cursor-pointer text-blue-60v border-none size-5 rounded-full ring-2 ring-offset-0 ring-gray-90 peer-focus:ring-2 peer-focus:ring-offset-0 peer-focus:ring-gray-90 peer-focus:outline peer-focus:outline-4 peer-focus:outline-offset-4 peer-focus:outline-blue-40v peer-disabled:ring-gray-50 peer-disabled:cursor-not-allowed peer-disabled:peer-checked:text-gray-50 peer-checked:ring-blue-60v peer-focus:peer-checked:ring-blue-60v before:size-4 before:block before:rounded-full before:peer-checked:bg-blue-60v before:peer-checked:peer-disabled:bg-gray-50"></div>
          <div class="pl-3 cursor-pointer block peer-disabled:text-gray-60 peer-disabled:cursor-not-allowed before:absolute before:-z-10 before:inset-0 before:bg-white before:border-2 before:border-gray-20 before:rounded peer-checked:before:border-blue-60v peer-checked:before:bg-blue-60v/10 peer-disabled:before:border-gray-10 peer-disabled:before:bg-white">
            {{- radio.label -}}
            {% if radio.description %}
            <span class="block mt-1 text-sm">
              {{- radio.description -}}
            </span>
            {% endif %}
          </div>
        </label>
      {% endfor %}
      </div>
    </fieldset>
  </form>