Radio — Sigta UI

Basic group

Comfortable density Compact density

Source

<div class="flex flex-col gap-3">
        <sigta:radio name="kit-density" label="Comfortable density" checked />
        <sigta:radio name="kit-density" label="Compact density" />
    </div>

Disabled

Locked selection Unavailable option

Source

<div class="flex flex-col gap-3">
        <sigta:radio name="kit-locked" label="Locked selection" checked disabled />
        <sigta:radio name="kit-locked" label="Unavailable option" disabled />
    </div>

Group in a field with error

Billing cadence

Monthly Quarterly Per milestone

Choose a cadence to continue.

Source

<div class="max-w-sm">
        <sigta:field label="Billing cadence" error="Choose a cadence to continue.">
            <div class="flex flex-col gap-2">
                <sigta:radio name="kit-cadence" label="Monthly" />
                <sigta:radio name="kit-cadence" label="Quarterly" />
                <sigta:radio name="kit-cadence" label="Per milestone" />
            </div>
        </sigta:field>
    </div>