{{ field.renderContainerOpeningTag }}

  {{ field.renderLabel }}
  {{ field.renderInstructions }}

  <div class="sm:flex gap-x-3">
    {% for scale in field.scales %}
      <div class="group sm:flex-1 mb-2 sm:mb-0">
        <input type="radio" name="{{ field.handle }}" value="{{ scale.value }}" id="{{ field.idAttribute }}-{{ loop.index }}" {{ field.value == scale.value ? "checked" }} class="hidden peer" />
        <label for="{{ field.idAttribute }}-{{ loop.index }}" class="{{ field.attributes.optionLabel.get("class") }}">
          <span class="w-5"></span>
          <span>{{ scale }}</span>
          <svg class="size-5 text-indigo-500 opacity-0 group-has-checked:opacity-100" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"></path>
          </svg>
        </label>
      </div>
    {% endfor %}
  </div>

  {% if field.legends %}
    <ul class="sm:flex hidden w-full text-sm font-medium text-gray-400 mt-1">
      {% for legend in field.legends %}
        <li class="w-full {{ field.attributes.option.get("class") }} {% if loop.index == 1 %}text-left{% elseif loop.index == field.legends|length %}text-right{% else %}text-center{% endif %}">
          {{ legend }}
        </li>
      {% endfor %}
    </ul>
  {% endif %}

  {{ field.renderErrors }}

{{ field.renderContainerClosingTag }}