Bradley Kirton's Blog

class MyForm(forms.Form):
    are_you_a_robot = forms.BooleanField(
        label="Are you a robot?",
        widget=forms.widgets.RadioSelect(
            choices=[(True, "Yes"), (False, "No")]
        ),
    )

<div class="flex flex-col justify-start items-center p-10 border-2 border-lime-500 rounded-lg">
    <p class="text-[#081F5E] font-semibold">{{ form.are_you_a_robot.label }}</p>
    <div class="flex flex-row gap-10">
        {% for radio in form.are_you_a_robot %}
        <div>
            <input
                id="{{ radio.id_for_label }}"
                value="{{ radio.data.value|stringformat:'s' }}"
                type="radio"
                name="{{ form.are_you_a_robot.name }}"
                class="peer hidden">
            <label
                class="
                    block
                    py-3 px-8
                    font-bold
                    border-2 border-black
                    rounded-full
                    transition-all duration-300 ease-in-out
                    shadow-[0.2rem_0.2rem] shadow-slate-500
                    hover:shadow-none
                    -translate-y-1 -translate-x-1
                    hover:translate-y-0 hover:translate-x-0
                    hover:bg-lime-200
                    peer-checked:bg-lime-500 peer-checked:text-white
                    cursor-pointer
                "
                for="{{ radio.id_for_label }}">
                {{ radio.choice_label }}
            </label>
        </div>
        {% endfor %}
    </div>
</div>