Colored checkboxes

use custom accent color according to your design

This tailwind example is contributed by Pixel Perfect, on 17-Feb-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Input

Author Pixel Perfect

Tailwind v3.4 6.2k 8

Fork Fullscreen

<div class="flex flex-col gap-2">
    <div>
        <label class="inline-flex items-center" for="redCheckBox">
          <input id="redCheckBox" type="checkbox" class="w-4 h-4 accent-red-600" checked>
          <span class="ml-2">Red checkbox</span>
        </label>
    </div>
    <div>
        <label class="inline-flex items-center" for="tealCheckBox">
          <input id="tealCheckBox" type="checkbox" class="w-4 h-4 accent-teal-600" checked>
          <span class="ml-2">Teal checkbox</span>
        </label>
    </div>
    <div>
        <label class="inline-flex items-center" for="yellowCheckBox">
          <input id="yellowCheckBox" type="checkbox" class="w-4 h-4 accent-yellow-600" checked>
          <span class="ml-2">Yellow checkbox</span>
        </label>
    </div>
    <div>
        <label class="inline-flex items-center" for="grayCheckBox">
          <input id="grayCheckBox" type="checkbox" class="w-4 h-4 accent-gray-700" checked>
          <span class="ml-2">Gray checkbox</span>
        </label>
    </div>
    <div>
        <label class="inline-flex items-center" for="indigoCheckBox">
          <input id="indigoCheckBox" type="checkbox" class="w-4 h-4 accent-indigo-700" checked>
          <span class="ml-2">Indigo checkbox</span>
        </label>
    </div>
</div>

Related Examples

Radio Buttons
Users can click anywhere on the input field to select the radio option

Prajwal Hallale

4 years ago

17.1k
Login-Register-Simple
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

David Chen

1 hour ago

1
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Ameth Galarcio

2 years ago

3.4k
Elegant OTP Input Fields with TailwindCSS
A clean and responsive OTP input field component built with TailwindCSS. This design features six single-character input fields with smooth transitions, light gray borders, and backgrounds. On focus, the borders turn blue, creating a visually appealing and user-friendly experience. Perfect for authentication and verification forms.

SHARIFUL ISLAM

1 year ago

2.3k
Login Form
Login Form

Md. Tofayel islam

2 years ago

2.8k
Select input

Sophia Baker

3 years ago

15.1k
Textarea input
Fancy Textarea

Piet Vriend

3 years ago

12k
Simple range slider

Nour Haider

3 years ago

16.5k
Yes / No radio input with reset button

Kris Showen

3 years ago

11.1k
Range Slider

Alok

4 years ago

14.7k
Stacked Checkboxes

kishan pc

2 years ago

3.9k
Contact us form
Contact us form

Geoffrey Callaghan

2 years ago

7.6k