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.4k

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.7k
Material 3 Radio Buttons [Light]
Radio buttons that conform to Google's Material 3 design guidelines

Author:
Nick Girga

2 months ago

239
File upload form

Author:
Lukas Müller

2 years ago

13k
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

1 year ago

8.1k
Default phone input

Author:
Md. Tofayel islam

1 year ago

2.6k
Email input

Author:
Sophia Baker

2 years ago

10.6k
Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

2 years ago

16k
Accordion block
FAQ accordion component, featuring expandable sections with smooth transitions and a clean, modern design

Author:
Maxim

8 months ago

1.2k
Cart with alpinejs and tailwind css
How to add items to your cart with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.7k
Search input

Author:
Leon Bachmann

2 years ago

10.4k
time Tailwind CSS and Alpinejs

Author:
Hai mmm

9 months ago

1.2k
Hover Button
Hover button then a overlay came from bottom to top

Author:
Md. Tofayel islam

10 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components