Checkbox models

Tailwind Checkbox models

This tailwind example is contributed by QQ-VVN, on 11-May-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Toggle switch Other

Author QQ-VVN

Tailwind v3.4 1.5k 6

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 flex justify-center items-center w-screen h-screen p-5">
  <div class="grid grid-cols-5 gap-6 p-6 bg-gray-900">
  
  
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-3 w-3 text-blue-600 rounded focus:ring-blue-500">
    <span class="text-white text-sm">Küçük</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500">
    <span class="text-white">Normal</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500">
    <span class="text-white text-lg">Orta</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-6 w-6 text-blue-600 rounded focus:ring-blue-500">
    <span class="text-white text-xl">Büyük</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-7 w-7 text-blue-600 rounded focus:ring-blue-500">
    <span class="text-white text-2xl">Ekstra Büyük</span>
  </label>
  
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-blue-600 peer-checked:border-blue-600 border-2 border-gray-500"></div>
      <div class="absolute hidden w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:block"></div>
    </div>
    <span class="text-white">Özel Mavi</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-red-600 peer-checked:border-red-600 border-2 border-gray-500"></div>
      <div class="absolute hidden w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:block"></div>
    </div>
    <span class="text-white">Özel Kırmızı</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-green-600 peer-checked:border-green-600 border-2 border-gray-500"></div>
      <div class="absolute hidden w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:block"></div>
    </div>
    <span class="text-white">Özel Yeşil</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-yellow-600 peer-checked:border-yellow-600 border-2 border-gray-500"></div>
      <div class="absolute hidden w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:block"></div>
    </div>
    <span class="text-white">Özel Sarı</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-purple-600 peer-checked:border-purple-600 border-2 border-gray-500"></div>
      <div class="absolute hidden w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:block"></div>
    </div>
    <span class="text-white">Özel Mor</span>
  </label>
  
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-blue-600 transition-all duration-300 ease-in-out"></div>
      <div class="absolute opacity-0 w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:opacity-100 transition-opacity duration-300 delay-100"></div>
    </div>
    <span class="text-white">Animasyonlu 1</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-red-600 peer-checked:scale-110 transition-all duration-300 ease-in-out"></div>
      <div class="absolute opacity-0 w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:opacity-100 transition-opacity duration-300 delay-100"></div>
    </div>
    <span class="text-white">Animasyonlu 2</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-full peer-checked:bg-green-600 transition-all duration-300 ease-in-out"></div>
      <div class="absolute opacity-0 w-3 h-3 bg-white rounded-full left-1.5 top-1.5 peer-checked:opacity-100 transition-opacity duration-300 delay-100"></div>
    </div>
    <span class="text-white">Animasyonlu 3</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-yellow-600 peer-checked:rotate-90 transition-all duration-300 ease-in-out"></div>
      <div class="absolute opacity-0 w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:opacity-100 transition-opacity duration-300 delay-100"></div>
    </div>
    <span class="text-white">Animasyonlu 4</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-purple-600 peer-checked:border-purple-600 border-2 border-gray-500 transition-all duration-300 ease-in-out"></div>
      <div class="absolute opacity-0 w-4 h-4 bg-white rounded-sm left-1 top-1 scale-0 peer-checked:scale-75 peer-checked:opacity-100 transition-all duration-300 delay-100"></div>
    </div>
    <span class="text-white">Animasyonlu 5</span>
  </label>
  
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-11 h-6 bg-gray-700 rounded-full peer-checked:bg-blue-600 transition-colors duration-300"></div>
      <div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-all duration-300 peer-checked:left-6"></div>
    </div>
    <span class="text-white">Toggle Mavi</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-11 h-6 bg-gray-700 rounded-full peer-checked:bg-red-600 transition-colors duration-300"></div>
      <div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-all duration-300 peer-checked:left-6"></div>
    </div>
    <span class="text-white">Toggle Kırmızı</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-11 h-6 bg-gray-700 rounded-full peer-checked:bg-green-600 transition-colors duration-300"></div>
      <div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-all duration-300 peer-checked:left-6"></div>
    </div>
    <span class="text-white">Toggle Yeşil</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-11 h-6 bg-gray-700 rounded-full peer-checked:bg-yellow-600 transition-colors duration-300"></div>
      <div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-all duration-300 peer-checked:left-6"></div>
    </div>
    <span class="text-white">Toggle Sarı</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-11 h-6 bg-gray-700 rounded-full peer-checked:bg-purple-600 transition-colors duration-300"></div>
      <div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-all duration-300 peer-checked:left-6"></div>
    </div>
    <span class="text-white">Toggle Mor</span>
  </label>
  
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500 shadow-lg shadow-blue-500/30">
    <span class="text-white">Gölgeli Mavi</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-5 w-5 text-red-600 rounded focus:ring-red-500 shadow-lg shadow-red-500/30">
    <span class="text-white">Gölgeli Kırmızı</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-5 w-5 text-green-600 rounded focus:ring-green-500 shadow-lg shadow-green-500/30">
    <span class="text-white">Gölgeli Yeşil</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-5 w-5 text-yellow-600 rounded focus:ring-yellow-500 shadow-lg shadow-yellow-500/30">
    <span class="text-white">Gölgeli Sarı</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-5 w-5 text-purple-600 rounded focus:ring-purple-500 shadow-lg shadow-purple-500/30">
    <span class="text-white">Gölgeli Mor</span>
  </label>
  
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-blue-600 transition-all duration-300"></div>
      <svg class="absolute w-4 h-4 text-white left-1 top-1 opacity-0 peer-checked:opacity-100 transition-opacity duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
      </svg>
    </div>
    <span class="text-white">İkonlu 1</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-red-600 transition-all duration-300"></div>
      <svg class="absolute w-4 h-4 text-white left-1 top-1 opacity-0 peer-checked:opacity-100 transition-opacity duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <span class="text-white">İkonlu 2</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-green-600 transition-all duration-300"></div>
      <svg class="absolute w-4 h-4 text-white left-1 top-1 opacity-0 peer-checked:opacity-100 transition-opacity duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z"></path>
        <path d="M10 6a1 1 0 011 1v3a1 1 0 01-1 1H7a1 1 0 110-2h2V7a1 1 0 011-1z"></path>
      </svg>
    </div>
    <span class="text-white">İkonlu 3</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-yellow-600 transition-all duration-300"></div>
      <svg class="absolute w-4 h-4 text-white left-1 top-1 opacity-0 peer-checked:opacity-100 transition-opacity duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <span class="text-white">İkonlu 4</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-purple-600 transition-all duration-300"></div>
      <svg class="absolute w-4 h-4 text-white left-1 top-1 opacity-0 peer-checked:opacity-100 transition-opacity duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <span class="text-white">İkonlu 5</span>
  </label>
  
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 peer-checked:bg-blue-600 transition-all duration-300 transform rotate-45"></div>
      <div class="absolute opacity-0 w-3 h-3 border-b-2 border-r-2 border-white left-1.5 top-1 peer-checked:opacity-100 transition-opacity duration-300 delay-100"></div>
    </div>
    <span class="text-white">Kare Döndürülmüş</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-0 h-0 border-l-[12px] border-r-[12px] border-b-[20px] border-l-transparent border-r-transparent border-b-gray-700 peer-checked:border-b-red-600 transition-colors duration-300"></div>
      <div class="absolute opacity-0 w-2 h-2 bg-white rounded-full left-[5px] top-[10px] peer-checked:opacity-100 transition-opacity duration-300 delay-100"></div>
    </div>
    <span class="text-white">Üçgen</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 peer-checked:bg-green-600 transition-all duration-300 clip-path-hexagon"></div>
      <div class="absolute opacity-0 w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:opacity-100 transition-opacity duration-300 delay-100"></div>
    </div>
    <span class="text-white">Altıgen</span>
    <style>
      .clip-path-hexagon {
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      }
    </style>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 peer-checked:bg-yellow-600 transition-all duration-300 rounded-tl-xl rounded-br-xl"></div>
      <div class="absolute opacity-0 w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:opacity-100 transition-opacity duration-300 delay-100"></div>
    </div>
    <span class="text-white">Özel Köşeler</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 peer-checked:bg-purple-600 transition-all duration-300 rounded-full"></div>
      <div class="absolute opacity-0 w-4 h-4 border-2 border-white rounded-full left-1 top-1 peer-checked:opacity-100 transition-opacity duration-300 delay-100"></div>
    </div>
    <span class="text-white">Daire İçinde Daire</span>
  </label>
</div>

</div>

Related Examples

Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Hamza Atig

1 year ago

1.6k
Infinity Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN, responsif via mobile and tablet

Alif Bima Pradana

7 months ago

1.1k
Horizon Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN

Alif Bima Pradana

7 months ago

935
Responsive SaaS Pricing Cards with Monthly Yearly Toggle

JUGENDRA GANGWAR

1 month ago

25
Why Choose Us - Our Core Strengths
Discover what sets us apart with this engaging "Why Choose Us" section. Highlighting three key pillars—passion, honesty, and continuous improvement—this component features a bold, centered headline with a striking blue accent

Vikas Kushwah

1 year ago

1.9k
hello world
by salvator

Anonymous

1 year ago

1.2k
Hero Section
Modern Gradient Color Scheme - Uses a professional purple-to-teal gradient for visual appeal Animated Elements: Floating decorative circles with subtle animation Fade-in effect for the main illustration Pulsing status indicator Engaging Typography: Gradient text for key phrases Responsive font sizing Clean Poppins font family Social Proof Elements: Client avatars Star ratings Trust indicators ("Trusted by 500+ businesses") Call-to-Action Buttons: Primary gradient button Secondary outlined button Hover effects and transitions Visual Hierarchy: Clear headline with emphasis on transformation Supporting subheading Balanced layout with image Performance Indicators: ROI badge Growth metric badge Responsive Design: Works on mobile and desktop Grid layout that adapts to screen size

KULDEEP

1 year ago

1.4k
Banner Page
Community Banner section code

Sayista Yazdani

1 month ago

147
Toggle button

Matthew Chen

3 years ago

13.4k
joker
joker cyber punk

Baraka Salvator

1 year ago

2k
Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Hamza Atig

8 months ago

737
cards
cards with background animation

Anonymous

3 years ago

12.6k