Radio Group

A set of options where only one can be picked.

Free Pro Team

Installation

uvx django_shadcn@latest add radio_group

Usage

Standard Express

<c-radio-group>
    <label class="flex items-center gap-3">
        <c-radio-group.item name="delivery" value="standard" checked />
        <span class="text-sm font-medium">Standard</span>
    </label>
    <label class="flex items-center gap-3">
        <c-radio-group.item name="delivery" value="express" />
        <span class="text-sm font-medium">Express</span>
    </label>
</c-radio-group>

Items are native radios, so name groups them and the browser handles the exclusivity, the keyboard and the form submission.

Examples

From a Django form

<c-radio-group>
    {% for radio in form.delivery %}
        <label class="flex items-center gap-3">
            <c-radio-group.item name="{{ radio.name }}" value="{{ radio.data.value }}" />
            <span class="text-sm font-medium">{{ radio.choice_label }}</span>
        </label>
    {% endfor %}
</c-radio-group>

Disabled

Locked in Not available

<c-radio-group.item name="tier" value="one" checked disabled />

Notes

Radix draws the dot with a nested indicator element. A native radio cannot hold children, so the dot here is the background painted onto the content box only — bg-clip-content with a small padding shrinks it to a circle in the middle. The visible result is the same and the control stays a real form field.