Home
Pixel Perfect
Colored checkboxes

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 CSS v3. It is responsive. It supports dark mode.

Input

Author Pixel Perfect

4.9k

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

Author:
Prajwal Hallale

3 years ago

16.8k
Contact us form
Contact us form

Author:
Geoffrey Callaghan

1 year ago

5.9k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

8 months ago

1.2k
floting input

Author:
Md. Tofayel islam

1 year ago

2.6k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.1k
Serious Input Html
Input text serious like apple or smth

Author:
Cristian

1 year ago

1.9k
File upload input section with file preview

Author:
Noob

3 years ago

11.9k
Yes / No radio input with reset button

Author:
Kris Showen

2 years ago

10.4k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

4 days ago

82
test2

Author:
SHAHAD EIDAH ALHAERTHI

1 year ago

1.6k
Range slider
Range slider with upper limit and lower limit.

Author:
Alok

3 years ago

11.9k
Search input asasasas
sasasasasas

Author:
Notify ahmedabad

1 year ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components