inputradio-cardsintermediate

Radio Group Cards

A radio button group styled as selectable cards with active border highlighting.

Preview
<fieldset class="space-y-3 max-w-sm">
  <label class="flex items-center gap-4 p-4 border-2 border-blue-600 bg-blue-50 rounded-xl cursor-pointer">
    <input type="radio" name="plan" checked class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" />
    <div>
      <p class="font-semibold text-gray-900">Starter</p>
      <p class="text-sm text-gray-500">$9/month &mdash; 5 projects</p>
    </div>
  </label>
  <label class="flex items-center gap-4 p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:border-gray-300 transition-colors">
    <input type="radio" name="plan" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" />
    <div>
      <p class="font-semibold text-gray-900">Pro</p>
      <p class="text-sm text-gray-500">$29/month &mdash; Unlimited projects</p>
    </div>
  </label>
  <label class="flex items-center gap-4 p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:border-gray-300 transition-colors">
    <input type="radio" name="plan" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" />
    <div>
      <p class="font-semibold text-gray-900">Enterprise</p>
      <p class="text-sm text-gray-500">Custom pricing &mdash; Dedicated support</p>
    </div>
  </label>
</fieldset>

Color Breakdown

Selected Border

border-blue-600

#2563eb

Selected Background

bg-blue-50

#eff6ff

Unselected Border

border-gray-200

#e5e7eb

Radio Accent

text-blue-600

#2563eb

Title

text-gray-900

#111827

Description

text-gray-500

#6b7280

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:border-blue-500 dark:bg-blue-900/20 dark:border-gray-700 dark:text-white

Use Cases

Pricing plan selectionShipping method choiceSubscription tier selection

Browser Support

All modern browsers.

Related Recipes

Toggle Button

button - intermediate

Newsletter Section

section - beginner

Floating Label Input

input - intermediate

Gradient Form

form - intermediate

Dark Form

form - beginner

Pill Search Bar

input - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I toggle the selected card styling?▼
Use JavaScript to add border-blue-600 bg-blue-50 to the selected label and border-gray-200 to others when a radio input changes.