Back to Discover
Tailwind CSS Checkbox and Radio Buttons Examples

Amelia
Created Nov 03, 2025
0 views
0 likes
0 comments
0 forks
Export Fork Like
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<body class="bg-gray-50 min-h-screen py-12 px-4">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold text-gray-900 mb-8">Checkbox & Radio Button Examples</h1>

    <!-- Standard Checkboxes -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
      <h2 class="text-xl font-semibold text-gray-800 mb-4">Standard Checkboxes</h2>
      <div class="space-y-3" x-data="{ items: ['option1', 'option3'] }">
        <label class="flex items-center cursor-pointer group">
          <input type="checkbox" value="option1" x-model="items" 
                 class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-0 cursor-pointer">
          <span class="ml-3 text-gray-700 group-hover:text-gray-900">Enable notifications</span>
        </label>
        <label class="flex items-center cursor-pointer group">
          <input type="checkbox" value="option2" x-model="items"
                 class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-0 cursor-pointer">
          <span class="ml-3 text-gray-700 group-hover:text-gray-900">Subscribe to newsletter</span>
        </label>
        <label class="flex items-center cursor-pointer group">
          <input type="checkbox" value="option3" x-model="items"
                 class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-0 cursor-pointer">
          <span class="ml-3 text-gray-700 group-hover:text-gray-900">Accept terms and conditions</span>
        </label>
      </div>
    </div>

    <!-- Custom Styled Checkboxes with Icons -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
      <h2 class="text-xl font-semibold text-gray-800 mb-4">Checkboxes with Icons</h2>
      <div class="space-y-3" x-data="{ features: ['email', 'security'] }">
        <label class="flex items-start cursor-pointer group">
          <input type="checkbox" value="email" x-model="features"
                 class="w-5 h-5 mt-0.5 text-indigo-600 border-gray-300 rounded focus:ring-2 focus:ring-indigo-500 cursor-pointer">
          <div class="ml-3 flex items-center">
            <ion-icon name="mail-outline" class="text-indigo-600 text-xl mr-2"></ion-icon>
            <div>
              <span class="text-gray-900 font-medium block">Email Updates</span>
              <span class="text-gray-500 text-sm">Get weekly email digests</span>
            </div>
          </div>
        </label>
        <label class="flex items-start cursor-pointer group">
          <input type="checkbox" value="security" x-model="features"
                 class="w-5 h-5 mt-0.5 text-indigo-600 border-gray-300 rounded focus:ring-2 focus:ring-indigo-500 cursor-pointer">
          <div class="ml-3 flex items-center">
            <ion-icon name="shield-checkmark-outline" class="text-indigo-600 text-xl mr-2"></ion-icon>
            <div>
              <span class="text-gray-900 font-medium block">Two-Factor Authentication</span>
              <span class="text-gray-500 text-sm">Add an extra layer of security</span>
            </div>
          </div>
        </label>
        <label class="flex items-start cursor-pointer group">
          <input type="checkbox" value="dark" x-model="features"
                 class="w-5 h-5 mt-0.5 text-indigo-600 border-gray-300 rounded focus:ring-2 focus:ring-indigo-500 cursor-pointer">
          <div class="ml-3 flex items-center">
            <ion-icon name="moon-outline" class="text-indigo-600 text-xl mr-2"></ion-icon>
            <div>
              <span class="text-gray-900 font-medium block">Dark Mode</span>
              <span class="text-gray-500 text-sm">Use dark theme interface</span>
            </div>
          </div>
        </label>
      </div>
    </div>

    <!-- Radio Buttons -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
      <h2 class="text-xl font-semibold text-gray-800 mb-4">Radio Buttons</h2>
      <div class="space-y-3" x-data="{ plan: 'basic' }">
        <label class="flex items-center cursor-pointer group">
          <input type="radio" name="plan" value="basic" x-model="plan"
                 class="w-5 h-5 text-blue-600 border-gray-300 focus:ring-2 focus:ring-blue-500 cursor-pointer">
          <span class="ml-3 text-gray-700 group-hover:text-gray-900">Basic Plan - Free</span>
        </label>
        <label class="flex items-center cursor-pointer group">
          <input type="radio" name="plan" value="pro" x-model="plan"
                 class="w-5 h-5 text-blue-600 border-gray-300 focus:ring-2 focus:ring-blue-500 cursor-pointer">
          <span class="ml-3 text-gray-700 group-hover:text-gray-900">Pro Plan - $9/month</span>
        </label>
        <label class="flex items-center cursor-pointer group">
          <input type="radio" name="plan" value="enterprise" x-model="plan"
                 class="w-5 h-5 text-blue-600 border-gray-300 focus:ring-2 focus:ring-blue-500 cursor-pointer">
          <span class="ml-3 text-gray-700 group-hover:text-gray-900">Enterprise Plan - $29/month</span>
        </label>
      </div>
    </div>

    <!-- Card-Style Radio Buttons -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
      <h2 class="text-xl font-semibold text-gray-800 mb-4">Card-Style Radio Selection</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4" x-data="{ shipping: 'standard' }">
        <label class="cursor-pointer">
          <input type="radio" name="shipping" value="standard" x-model="shipping" class="peer sr-only">
          <div class="border-2 border-gray-200 rounded-lg p-4 hover:border-blue-400 peer-checked:border-blue-600 peer-checked:bg-blue-50 transition">
            <div class="flex items-center justify-between mb-2">
              <ion-icon name="bicycle-outline" class="text-2xl text-gray-600"></ion-icon>
              <span class="text-xs font-medium text-gray-500">5-7 days</span>
            </div>
            <h3 class="font-semibold text-gray-900">Standard</h3>
            <p class="text-sm text-gray-600 mt-1">Free shipping</p>
          </div>
        </label>
        <label class="cursor-pointer">
          <input type="radio" name="shipping" value="express" x-model="shipping" class="peer sr-only">
          <div class="border-2 border-gray-200 rounded-lg p-4 hover:border-blue-400 peer-checked:border-blue-600 peer-checked:bg-blue-50 transition">
            <div class="flex items-center justify-between mb-2">
              <ion-icon name="airplane-outline" class="text-2xl text-gray-600"></ion-icon>
              <span class="text-xs font-medium text-gray-500">2-3 days</span>
            </div>
            <h3 class="font-semibold text-gray-900">Express</h3>
            <p class="text-sm text-gray-600 mt-1">$12.99</p>
          </div>
        </label>
        <label class="cursor-pointer">
          <input type="radio" name="shipping" value="overnight" x-model="shipping" class="peer sr-only">
          <div class="border-2 border-gray-200 rounded-lg p-4 hover:border-blue-400 peer-checked:border-blue-600 peer-checked:bg-blue-50 transition">
            <div class="flex items-center justify-between mb-2">
              <ion-icon name="rocket-outline" class="text-2xl text-gray-600"></ion-icon>
              <span class="text-xs font-medium text-gray-500">Next day</span>
            </div>
            <h3 class="font-semibold text-gray-900">Overnight</h3>
            <p class="text-sm text-gray-600 mt-1">$24.99</p>
          </div>
        </label>
      </div>
    </div>

    <!-- Toggle-Style Checkbox -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
      <h2 class="text-xl font-semibold text-gray-800 mb-4">Toggle Switches</h2>
      <div class="space-y-4" x-data="{ notifications: true, marketing: false, updates: true }">
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <ion-icon name="notifications-outline" class="text-xl text-gray-600 mr-3"></ion-icon>
            <span class="text-gray-700">Push Notifications</span>
          </div>
          <label class="relative inline-flex items-center cursor-pointer">
            <input type="checkbox" x-model="notifications" class="sr-only peer">
            <div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
          </label>
        </div>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <ion-icon name="megaphone-outline" class="text-xl text-gray-600 mr-3"></ion-icon>
            <span class="text-gray-700">Marketing Emails</span>
          </div>
          <label class="relative inline-flex items-center cursor-pointer">
            <input type="checkbox" x-model="marketing" class="sr-only peer">
            <div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
          </label>
        </div>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <ion-icon name="refresh-outline" class="text-xl text-gray-600 mr-3"></ion-icon>
            <span class="text-gray-700">Product Updates</span>
          </div>
          <label class="relative inline-flex items-center cursor-pointer">
            <input type="checkbox" x-model="updates" class="sr-only peer">
            <div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
          </label>
        </div>
      </div>
    </div>

  </div>
Comments (0)

No comments yet. Be the first!