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

5.2k

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

17k
simple badge

Author:
Muhammad Imran

1 year ago

1.9k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.3k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

9 months ago

803
time Tailwind CSS and Alpinejs

Author:
Hai mmm

1 year ago

1.8k
Console like input field

Author:
Charlotte Dupont

3 years ago

11.9k
Google like input field
with Floating Label. The input placeholder floats towards the upside as the input field is in focus.

Author:
Samuel Dawson

3 years ago

17.8k
Comment section

Author:
Manuela Bianka

3 years ago

11.7k
todo list with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2k
Upload file input field

Author:
Gopi Yadav

3 years ago

14.9k
Material 3 Checkboxes [Light]
Checkboxes that conform to Google's Material 3 design guidelines

Author:
Nick Girga

8 months ago

468
Responsive Footer Section
This modern and responsive footer adapts seamlessly to all screen sizes, ensuring a clean and organized layout. It includes essential navigation links, contact details, and a subscription form, all structured for easy access. Using display: contents;, the design remains flexible and visually balanced, enhancing the user experience across devices.

Author:
ABDO-SY

9 months ago

676

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components