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.1k 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
floting input

Md. Tofayel islam

2 years ago

3.7k
Single Input newsletter form

Task Master

3 years ago

11k
Drag and drop image upload with image preview

Santos78

3 years ago

23.6k
Search input asasasas
sasasasasas

Notify ahmedabad

2 years ago

1.8k
test1 اصلي

SHAHAD EIDAH ALHAERTHI

2 years ago

2.6k
Large File upload input

Akshay

4 years ago

15.3k
Gaming UI Card, Form
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Ayyamperumal S

9 months ago

615
beautiful tailwind contact form
beautiful tailwind contact form

Geoffrey Callaghan

2 years ago

6.5k
Textarea

Ron Hicks

3 years ago

12.7k
Toggle button

Matthew Chen

3 years ago

13.4k
login
html , css

Hacker Development

1 year ago

1.3k