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

react tailwind custom checkbox preview

Tailwind CSS Custom Checkbox React Code | V1

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:

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

checkbox with tick mark

Tailwind Custom Checkbox V2 React Component

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:

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!


Flexy UI Newsletter

Build better and faster UIs.Get the latest components and hooks directly in your inbox. No spam!