Radio Card

A Card with radio input

 
<form class="space-y-4 max-w-xs w-full" data-shade="900">
    <label class="field block card variant-mixed space-y-0.5 px-4 py-3 hover:variant-soft has-[:checked]:outline has-[:checked]:variant-outlined has-[:checked]:outline-2 has-[:checked]:outline-primary-600" for="personal">
        <input type="radio" id="personal" name="plan" hidden />
        <div class="flex justify-between">
            <p class="text-title font-medium">Personal</p>
            <p class="text-body text-sm">$9.99</p>
        </div>
        <p class="mt-0 text-caption text-sm">For personal projects</p>
    </label>

    <label class="field block card variant-mixed space-y-0.5 px-4 py-3 hover:variant-soft has-[:checked]:outline has-[:checked]:variant-outlined has-[:checked]:outline-2 has-[:checked]:outline-primary-600" for="business">
        <input type="radio" id="business" name="plan" hidden />
        <div class="flex justify-between">
            <p class="text-title font-medium">Business</p>
            <p class="text-body text-sm">$39.99</p>
        </div>
        <p class="mt-0 text-caption text-sm">For startups and small businesses</p>
    </label>

    <label class="field block card variant-mixed space-y-0.5 px-4 py-3 hover:variant-soft has-[:checked]:outline has-[:checked]:variant-outlined has-[:checked]:outline-2 has-[:checked]:outline-primary-600" for="org">
        <input type="radio" id="org" name="plan" hidden />
        <div class="flex justify-between">
            <p class="text-title font-medium">Organization</p>
            <p class="text-body text-sm">$99.99</p>
        </div>
        <p class="mt-0 text-caption text-sm">For large organizations</p>
    </label>
</form>

With check icon

 
<form class="space-y-4 max-w-xs w-full" data-shade="900">
    <label class="field block card variant-mixed px-4 py-3 [--icon-display:none] hover:variant-soft has-[:checked]:[--icon-display:block] has-[:checked]:outline has-[:checked]:variant-outlined has-[:checked]:outline-2 has-[:checked]:outline-primary-600" for="personal2">
        <input type="radio" id="personal2" name="plan" hidden />
        <div class="flex justify-between">
            <p class="text-sm text-title font-medium">4-Core CPU</p>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 text-primary-600 [display:var(--icon-display)]">
                <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
            </svg>
        </div>
        <p class="mt-1 text-caption text-sm">For personal projects</p>
        <p class="mt-4 text-body text-sm">$9.99</p>
    </label>

    <label class="field block card variant-mixed px-4 py-3 [--icon-display:none] hover:variant-soft has-[:checked]:[--icon-display:block] has-[:checked]:outline has-[:checked]:variant-outlined has-[:checked]:outline-2 has-[:checked]:outline-primary-600" for="business2">
        <input type="radio" id="business2" name="plan" hidden />
        <div class="flex justify-between">
            <p class="text-sm text-title font-medium">6-Core CPU</p>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 text-primary-600 [display:var(--icon-display)]">
                <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
            </svg>
        </div>
        <p class="mt-1 text-caption text-sm">For startups and small businesses</p>
        <p class="mt-4 text-body text-sm">$39.99</p>
    </label>

    <label class="field block card variant-mixed px-4 py-3 [--icon-display:none] hover:variant-soft has-[:checked]:[--icon-display:block] has-[:checked]:outline has-[:checked]:variant-outlined has-[:checked]:outline-2 has-[:checked]:outline-primary-600" for="org2">
        <input type="radio" id="org2" name="plan" hidden />
        <div class="flex justify-between">
            <p class="text-sm text-title font-medium">8-Core CPU</p>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 text-primary-600 [display:var(--icon-display)]">
                <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
            </svg>
        </div>
        <p class="mt-1 text-caption text-sm">For large organizations</p>
        <p class="mt-4 text-body text-sm">$99.99</p>
    </label>
</form>

Ecommerce

 
<form class="flex gap-3">
    <label class="field btn variant-outlined icon-only intent-gray sz-md has-[:checked]:shadow-none has-[:checked]:[background-image:none] has-[:checked]:!bg-primary-600 has-[:checked]:!text-white" for="small">
        <input type="radio" id="small" name="size" hidden />
        S
    </label>
    <label class="field btn variant-outlined icon-only intent-gray sz-md has-[:checked]:shadow-none has-[:checked]:[background-image:none] has-[:checked]:!bg-primary-600 has-[:checked]:!text-white" for="medium">
        <input type="radio" id="medium" checked name="size" hidden />
        M
    </label>
    <label class="field btn variant-outlined icon-only intent-gray sz-md has-[:checked]:shadow-none has-[:checked]:[background-image:none] has-[:checked]:!bg-primary-600 has-[:checked]:!text-white" for="large">
        <input type="radio" id="large" name="size" hidden />
        L
    </label>
</form>