Custom Tailwind CSS Checkbox Components in React {Two Stylish Variants}

Checkboxes are also essential form elements. Sometimes, we need to customize checkboxes to make them look more appealing. In this guide, I will show you how to build a custom checkbox component using Tailwind CSS in ReactJS in two different ways.

This checkbox is easy to implement and allows users to select multiple options in forms, making it perfect for user settings, preferences, or any feature that requires boolean input.

We have already covered Input and Radio Button form elements.

Checkbox Variant 1: Simple and Flexible Design

React Tailwind Custom Checkbox Preview | V1

Tailwind CSS Custom Checkbox React Code | V1

Copy
1interface CheckboxProps {
2  id: string
3  label: string
4  checked: boolean
5  name: string
6  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
7}
8
9const Checkbox: React.FC<CheckboxProps> = ({
10  id,
11  label,
12  checked,
13  name,
14  onChange,
15}) => {
16  return (
17    <div className="mt-2 flex flex-row items-center">
18      <input
19        id={id}
20        type="checkbox"
21        checked={checked}
22        name={name}
23        onChange={onChange}
24        className="mr-2 size-5 cursor-pointer appearance-none rounded-[4px] border border-[#292d32] outline-none checked:relative checked:border-[#33cccc] checked:bg-[#33cccc] checked:before:absolute checked:before:right-[3px] checked:before:top-[-3px] checked:before:text-base checked:before:text-white checked:before:content-['✔'] focus:shadow-[0_0_20px_#33cccc]"
25      />
26      <label htmlFor={id} className="cursor-pointer text-sm">
27        {label}
28      </label>
29    </div>
30  )
31}
32
33export default Checkbox

Code Explanation

In the code above, we define a Checkbox component that accepts properties like id, label, checked, name, and onChange.

• CheckboxProps: This interface defines the types for the props your checkbox will accept.
• Label: The label is linked to the checkbox through the htmlFor attribute, allowing users to click the label to toggle the checkbox.

Demo

Here’s how to use the Checkbox component in a simple app:

Copy
1import React, { useState } from 'react'
2import Checkbox from './components/Checkbox'
3
4const App: React.FC = () => {
5  const [checkboxes, setCheckboxes] = useState({
6    upper: false,
7    lower: false,
8    numbers: false,
9    specialChars: false,
10  })
11
12  const handlePasswordFields = (event: React.ChangeEvent<HTMLInputElement>) => {
13    const { name, checked } = event.target
14    setCheckboxes((prevState) => ({
15      ...prevState,
16      [name]: checked,
17    }))
18  }
19
20  const { upper, lower, numbers, specialChars } = checkboxes
21
22  return (
23    <div className="p-4">
24      <h1 className="mb-4 text-xl">Password Options</h1>
25
26      <Checkbox
27        id="uppercase"
28        label="Uppercase"
29        checked={upper}
30        name="upper"
31        onChange={handlePasswordFields}
32      />
33      <Checkbox
34        id="lowercase"
35        label="Lowercase"
36        checked={lower}
37        name="lower"
38        onChange={handlePasswordFields}
39      />
40      <Checkbox
41        id="numbers"
42        label="Numbers"
43        checked={numbers}
44        name="numbers"
45        onChange={handlePasswordFields}
46      />
47      <Checkbox
48        id="specialChars"
49        label="Special Characters"
50        checked={specialChars}
51        name="specialChars"
52        onChange={handlePasswordFields}
53      />
54    </div>
55  )
56}
57
58export default App

How It Works

In this demo, we create a simple app where users can select password options such as uppercase letters, lowercase letters, numbers, and special characters. The state is managed using the useState hook, and the handlePasswordFields function updates the checkbox states based on user interaction.

Checkbox Variant 2: Animated Stylish Tailwind Checkbox

This version uses a rotated 'L' character as the checkmark, which is visually appealing and creative. It also includes a disabled state for scenarios requiring non-interactive inputs.

Tailwind Checkbox V2 Preview

Tailwind Custom Checkbox V2 React Component

Copy
1import React from 'react'
2
3interface PropsType {
4  label: string
5  id?: string
6  checked: boolean
7  handleChange: React.ChangeEventHandler<HTMLInputElement>
8  disabled?: boolean
9}
10
11const Checkbox: React.FC<PropsType> = ({
12  label,
13  id = 'default-checkbox',
14  checked,
15  handleChange,
16  disabled = false,
17}) => {
18  return (
19    <div className="relative flex items-center gap-2">
20      <input
21        type="checkbox"
22        id={id}
23        onChange={handleChange}
24        checked={checked}
25        disabled={disabled}
26        className="size-6 transform cursor-pointer appearance-none rounded-lg border-2 border-[#22031F] transition duration-[120ms] ease-in-out checked:border-none checked:border-[#CC76A1] checked:bg-[#CC76A1] disabled:cursor-not-allowed disabled:opacity-50"
27        aria-checked={checked}
28      />
29      <label
30        htmlFor={id}
31        className="cursor-pointer text-sm font-medium text-gray-800"
32      >
33        {label}
34      </label>
35      {checked && (
36        <span className="pointer-events-none absolute left-[7px] top-[-4px] rotate-[35deg] scale-x-[-1] transform text-lg font-bold text-white">
37          L
38        </span>
39      )}
40    </div>
41  )
42}
43
44export default Checkbox

Code Explanation (Variant 2)

In this variant:

• The Checkbox component includes an optional disabled state, styled using disabled pseudo-classes in Tailwind.
• The checkmark uses a rotated "L" character (<span>), creatively styled with rotate and scale-x for an engaging design.
• The aria-checked attribute ensures accessibility compliance.

Key Feature:

• Customizable: Easily change the border, background color, or text style by tweaking Tailwind classes.

How to Use Variant 2 in Your Project

Here’s an example of how to use the Animated Stylish Tailwind Checkbox in a React app:

Copy
1import React, { useState } from 'react'
2import Checkbox from './components/Checkbox'
3
4const App: React.FC = () => {
5  const [isChecked, setIsChecked] = useState(false)
6
7  const handleCheckboxChange: React.ChangeEventHandler<HTMLInputElement> = (
8    e,
9  ) => {
10    setIsChecked(e.target.checked)
11  }
12
13  return (
14    <div className="flex min-h-screen items-center justify-center bg-gray-100 p-6">
15      <div className="rounded-lg border border-pink-200 bg-white p-8">
16        <h1 className="mb-4 text-xl font-bold text-gray-800">Checkbox Demo</h1>
17        <Checkbox
18          id="remove-winner"
19          label="Remove the winner from the list"
20          checked={isChecked}
21          handleChange={handleCheckboxChange}
22        />
23        <p className="mt-4 text-sm text-gray-600">
24          {isChecked
25            ? 'Checkbox is checked! 🎉'
26            : 'Checkbox is not checked. 😢'}
27        </p>
28      </div>
29    </div>
30  )
31}
32
33export default App

With this guide, you can easily implement a custom checkbox component in your React application using Tailwind CSS. Customize it further as per your design requirements!