Home
QQ-VVN
Checkbox models

Checkbox models

Tailwind Checkbox models

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

Toggle switch Other

Author QQ-VVN

527

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.

Author:
Hamza Atig

4 months ago

473
TASK FAILED SUCCESSFULLY
TradingGoose Ep2 MockUp

Author:
Bruz

1 day ago

11
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

10 months ago

2.7k
Track Your Order
Track Your Order

Author:
Tanvir Hasan Bappy (Tanvir)

5 months ago

247
background animation
background animation

Author:
Jayendra Madara

1 year ago

2.7k
Payment success page example

Author:
Anonymous

3 months ago

515
Dark mode toggle button
Switch to dark mode without any hassle with this simple JavaScript hack. Sun night button

Author:
Nishant Trivedi

2 years ago

20.1k
Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

Author:
saim-t8

2 weeks ago

271
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

2 months ago

525
Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

4 months ago

704
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

2 months ago

655
Acode Master!
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

346

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components