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 sz-md before:!transition-none has-[:checked]:[background-image:none] has-[:checked]:!bg-primary-600 has-[:checked]:before:!bg-primary-600 has-[:checked]:before:!border-white/15 has-[:checked]:!text-white" for="small">
      <input type="radio" id="small" name="size" hidden />
      <span class="relative">S</span>
  </label>
  <label class="field btn variant-outlined icon-only sz-md before:!transition-none has-[:checked]:[background-image:none] has-[:checked]:!bg-primary-600 has-[:checked]:before:!bg-primary-600 has-[:checked]:before:!border-white/15 has-[:checked]:!text-white" for="medium">
      <input type="radio" id="medium" checked name="size" hidden />
      <span class="relative">M</span>
  </label>
  <label class="field btn variant-outlined icon-only sz-md before:!transition-none has-[:checked]:[background-image:none] has-[:checked]:!bg-primary-600 has-[:checked]:before:!bg-primary-600 has-[:checked]:before:!border-white/15 has-[:checked]:!text-white" for="large">
      <input type="radio" id="large" name="size" hidden />
      <span class="relative">L</span>
  </label>
</form>