A group of radio form elements styled like a large selectable buttons.
<div x-data="radioGroup('red')" @keydown.down.stop.prevent="selectNext" @keydown.right.stop.prevent="selectNext" @keydown.up.stop.prevent="selectPrevious" @keydown.left.stop.prevent="selectPrevious" role="radiogroup" :aria-labelledby="$id('radio-group-label')" x-id="['radio-group-label']"><label :id="$id('radio-group-label')" role="none" class="hidden">Choose your favorite color: <span x-text="value"></span></label>
<div x-ref="options" class="grid grid-cols-1 gap-y-4 sm:grid-cols-3 sm:gap-x-4 md:grid-cols-6">
<div x-data="{ option: 'red' }" @click="select(option)" @keydown.enter.stop.prevent="select(option)" @keydown.space.stop.prevent="select(option)" :aria-checked="isSelected(option)" :tabindex="hasRovingTabindex(option, $el) ? 0 : -1" :aria-labelledby="$id('radio-option-label')" x-id="['radio-option-label', 'radio-option-description']" role="radio" class="flex cursor-pointer border border-black rounded-md shadow p-4" :class="{ 'bg-black text-white': isSelected(option) }"><span :class="isSelected(option) ? 'bg-black ring-white border-white' : 'border-white'" class="inline-flex items-center justify-center shrink-0 mt-1 w-4 h-4 rounded-full border-2 ring-1 ring-black" aria-hidden="true"></span>
<div class="ml-3">
<p :id="$id('radio-option-label')" class="font-semibold text-md">Red</p>
</div>
</div>
<div x-data="{ option: 'white' }" @click="select(option)" @keydown.enter.stop.prevent="select(option)" @keydown.space.stop.prevent="select(option)" :aria-checked="isSelected(option)" :tabindex="hasRovingTabindex(option, $el) ? 0 : -1" :aria-labelledby="$id('radio-option-label')" x-id="['radio-option-label', 'radio-option-description']" role="radio" class="flex cursor-pointer border border-black rounded-md shadow p-4" :class="{ 'bg-black text-white': isSelected(option) }"><span :class="isSelected(option) ? 'bg-black ring-white border-white' : 'border-white'" class="inline-flex items-center justify-center shrink-0 mt-1 w-4 h-4 rounded-full border-2 ring-1 ring-black" aria-hidden="true"></span>
<div class="ml-3">
<p :id="$id('radio-option-label')" class="font-semibold text-md">White</p>
</div>
</div>
<div x-data="{ option: 'blue' }" @click="select(option)" @keydown.enter.stop.prevent="select(option)" @keydown.space.stop.prevent="select(option)" :aria-checked="isSelected(option)" :tabindex="hasRovingTabindex(option, $el) ? 0 : -1" :aria-labelledby="$id('radio-option-label')" x-id="['radio-option-label', 'radio-option-description']" role="radio" class="flex cursor-pointer border border-black rounded-md shadow p-4" :class="{ 'bg-black text-white': isSelected(option) }"><span :class="isSelected(option) ? 'bg-black ring-white border-white' : 'border-white'" class="inline-flex items-center justify-center shrink-0 mt-1 w-4 h-4 rounded-full border-2 ring-1 ring-black" aria-hidden="true"></span>
<div class="ml-3">
<p :id="$id('radio-option-label')" class="font-semibold text-md">Blue</p>
</div>
</div>
</div><input type="hidden" name="merchant_defined_data2" :value="value" />
</div>
{% apply spaceless %}
{# Radio Group #}
<div
x-data="radioGroup('{{ options[0].value }}')"
@keydown.down.stop.prevent="selectNext"
@keydown.right.stop.prevent="selectNext"
@keydown.up.stop.prevent="selectPrevious"
@keydown.left.stop.prevent="selectPrevious"
role="radiogroup"
:aria-labelledby="$id('radio-group-label')"
x-id="['radio-group-label']"
>
{# Radio Group Label #}
{% if label %}
<label :id="$id('radio-group-label')" role="none" class="hidden">{{ label }}: <span x-text="value"></span></label>
{% endif %}
{% if layout is same as('grid') %}
{% set classes = ['grid', 'grid-cols-1', 'gap-y-4', 'sm:grid-cols-3', 'sm:gap-x-4', 'md:grid-cols-6'] %}
{% else %}
{% set classes = ['flex', 'flex-col', 'space-y-2', 'max-w-2xl'] %}
{% endif %}
<div x-ref="options" class="{{ classes|join(' ') }}">
{# Options #}
{% for option in options %}
<div
x-data="{ option: '{{ option.value }}' }"
@click="select(option)"
@keydown.enter.stop.prevent="select(option)"
@keydown.space.stop.prevent="select(option)"
:aria-checked="isSelected(option)"
:tabindex="hasRovingTabindex(option, $el) ? 0 : -1"
:aria-labelledby="$id('radio-option-label')"
{%- if option.description %}
:aria-describedby="$id('radio-option-description')"
{% endif -%}
x-id="['radio-option-label', 'radio-option-description']"
role="radio"
class="flex cursor-pointer border border-black rounded-md shadow p-4"
:class="{ 'bg-black text-white': isSelected(option) }"
>
{# Checked Indicator #}
<span
:class="isSelected(option) ? 'bg-black ring-white border-white' : 'border-white'"
class="inline-flex items-center justify-center shrink-0 mt-1 w-4 h-4 rounded-full border-2 ring-1 ring-black"
aria-hidden="true"
></span>
{# Label and description #}
<div class="ml-3">
<p :id="$id('radio-option-label')" class="font-semibold text-md">{{ option.label }}</p>
{% if option.description %}
<span
:id="$id('radio-option-description')"
class="mt-2 text-sm"
:class="isSelected(option) ? 'text-white' : 'text-tertiary-600'"
>
{{ option.description }}
</span>
{% endif %}
</div>
</div>
{% endfor %}
{% block options %}{% endblock options %}
</div>
{% block footer %}{% endblock footer %}
{% if name %}
<input type="hidden" name="{{ name }}" :value="value" />
{% endif %}
</div>
{% endapply %}