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.6k 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.7k
Infinity Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN, responsif via mobile and tablet

Alif Bima Pradana

8 months ago

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

Alif Bima Pradana

8 months ago

987
Responsive SaaS Pricing Cards with Monthly Yearly Toggle

JUGENDRA GANGWAR

2 months ago

115
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

2k
Soft Lights & Slow Beats
Sink into the tranquil rhythms of a Sunday afternoon. This playlist blends soft melodies and gentle beats to create a mysterious yet comforting atmosphere — perfect for relaxing, reflecting, or simply unwinding as the day fades away.

Bonimater

1 year ago

1.2k
Reset Password UI
Reset password screen built with pure HTML and Tailwind CSS. Includes new password and confirm password fields, password strength indicator, security requirements checklist, inline SVG icons, and a premium glassmorphism SaaS interface.

JUGENDRA GANGWAR

1 month ago

215
authentication form terminal
authentication form with zsh on mac terminal looks

ardianhu

2 years ago

3.6k
Login Form

Anonymous

1 week ago

7
magic card
by salvator

Baraka Salvator

1 year ago

1.5k
info form

Anonymous

1 month ago

121