Create Checkboxes UI using React and Tailwind CSS
Last Updated :
24 Sep, 2024
Web forms rely on checkboxes to allow users to choose one option or multiple of several options. In the following post, we are going to walk through how to create a simple and reusable checkbox UI in React using Tailwind CSS. We will go over setting up the project, implementing the component, and styling it with Tailwind so that it is clean and responsive. We are also going to handle the state management of selected checkboxes, and how this UI can be useful in forms.
Prerequisites
Approach
To create a reusable Checkbox component in React, first, under the src/components directory, create a new file called Checkbox.jsx and define the component using the useState hook to manage whether the checkbox is checked or not. A function, handleCheckboxChange, will toggle this state when the checkbox is clicked. The component will also take a label prop that displays text next to the checkbox and adds a strikethrough effect when checked. Next, in src/App.jsx, import and use the Checkbox component multiple times with different labels to render a list of checkboxes in the App component.
Steps to create Checkboxes UI using React and Tailwind CSS
Step 1: Create a New React Project
npm create vite@latest checkbox-ui
Step 2: Select the following options
√ Select a framework: » React
√ Select a variant: » TypeScript
Step 3: Navigate to the React Project
cd checkbox-ui npm install
Step 4: Install and Configure Tailwind CSS
Next, install Tailwind CSS and set it up in your project.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Updated Dependencies:
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
}Project Structure:
Project strcutureExample: To demonstrate the checkbox UI using React and Tailwind CSS:
CSS
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--font-primary: 'Poppins', sans-serif;
--color-primary: #3b82f6;
/* Blue */
--color-secondary: #10b981;
/* Green */
--color-bg: linear-gradient(to right, #4facfe, #00f2fe);
/* Gradient background */
}
body {
margin: 0;
padding: 2rem;
background: var(--color-bg);
/* Apply gradient */
font-family: var(--font-primary);
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
}
.checkbox-container {
width: 100%;
max-width: 600px;
padding: 2rem;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
animation: fadeIn 1s ease-in-out;
}
.checkbox-container h1 {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-primary);
text-align: center;
margin-bottom: 1.5rem;
}
.checkbox-group {
display: flex;
align-items: center;
margin-bottom: 1.2rem;
font-size: 1.2rem;
}
.checkbox-group input[type="checkbox"] {
width: 24px;
height: 24px;
border-radius: 0.25rem;
transition: all 0.3s ease;
}
.checkbox-group input[type="checkbox"]:checked {
background-color: var(--color-secondary);
}
.checkbox-group input[type="checkbox"]:hover {
transform: scale(1.1);
}
.checkbox-group label {
margin-left: 0.75rem;
color: #374151;
}
.checkbox-container button {
width: 100%;
padding: 0.75rem 1.25rem;
background-color: var(--color-primary);
color: #ffffff;
font-size: 1.2rem;
font-weight: 600;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.3s ease;
animation: buttonFadeIn 1.5s ease-in-out;
}
.checkbox-container button:hover {
background-color: #2563eb;
transform: translateY(-2px);
}
.checkbox-container button:active {
background-color: #1e40af;
transform: scale(0.98);
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes buttonFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.submission-success {
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
color: var(--color-secondary);
text-align: center;
animation: successFadeIn 1s ease-in-out;
}
@keyframes successFadeIn {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
// src/components/Checkbox.tsx
import React from "react";
const Checkbox = ({ id, name, label, checked, onChange }) => {
return (
<div className="checkbox-group">
<input
type="checkbox"
id={id}
name={name}
checked={checked}
onChange={onChange}
/>
<label htmlFor={id}>{label}</label>
</div>
);
};
export default Checkbox;
/*tailwind.config.js*/
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
// src/app.tsx
import React, { useState } from "react";
import Checkbox from "./components/Checkbox"; // Import the Checkbox component
const App = () => {
const [checkboxes, setCheckboxes] = useState({
option1: false,
option2: false,
option3: false,
});
const [submitted, setSubmitted] = useState(false);
const handleCheckboxChange = (e) => {
const { name, checked } = e.target;
setCheckboxes((prevState) => ({
...prevState,
[name]: checked,
}));
};
const handleSubmit = (e) => {
e.preventDefault();
setSubmitted(true);
// Simulate action and reset after some time (e.g., 3 seconds)
setTimeout(() => {
setSubmitted(false);
setCheckboxes({
option1: false,
option2: false,
option3: false,
});
}, 3000);
};
return (
<div className="checkbox-container">
{!submitted ? (
<form onSubmit={handleSubmit}>
<h1>Which programming languages do you use?</h1>
<Checkbox
id="option1"
name="option1"
label="JavaScript"
checked={checkboxes.option1}
onChange={handleCheckboxChange}
/>
<Checkbox
id="option2"
name="option2"
label="Python"
checked={checkboxes.option2}
onChange={handleCheckboxChange}
/>
<Checkbox
id="option3"
name="option3"
label="Java"
checked={checkboxes.option3}
onChange={handleCheckboxChange}
/>
<button type="submit">Submit</button>
</form>
) : (
<div className="submission-success">Submission Successful!</div>
)}
</div>
);
};
export default App;
Steps to run the application:
Start the development server to ensure everything is working.By using below command
npm run dev
This will launch the project at http://localhost:5173.
Output:
Conclusion
In this post, we have created a reusable checkbox UI using React with Tailwind CSS. We have shown how to handle checkbox states, style components with Tailwind, and incorporate checkboxes into a simple UI herein. You can customize and implement an easy checkbox in your web application by following the steps described here.
Similar Reads
Create Buttons UI using React and Tailwind CSS Tailwind CSS is a utility-first CSS framework that allows developers to quickly build responsive and reusable components. We'll explore how to create buttons with different styles such as primary, secondary, and disabled states, and buttons of various sizes.PrerequisitesReact JavaScriptNodeJSTailwin
2 min read
Create Banners using React and Tailwind CSS We will build a responsive banner component using React and Tailwind CSS. Tailwind CSS allows us to create highly customizable and modern UI components with minimal effort. The banner will include a heading and subheading and a call to action button styled for responsiveness and accessibility.Prereq
3 min read
Create Feeds UI using React and Tailwind CSS In the world of social networking, feeds are the primary way users interact with content. Whether it is on LinkedIn, Facebook, or Twitter the feed showcases posts updates, and activities from people or organizations. This article will help you build a LinkedIn-style feed UI using React and Tailwind
4 min read
Create Logo Clouds using React and Tailwind CSS A Logo Cloud is a webpage section that displays logos of partners, sponsors, clients, or technologies in a visually appealing way. This component is often used to establish credibility or showcase affiliations. Using React and Tailwind CSS you can create a responsive and customizable logo cloud that
3 min read
Create Tables UI using React and Tailwind CSS The Basic Table is the simplest form of a table ideal for displaying simple data without any additional styling. It consists of a header row and data rows. This type of table is useful for presenting lists or tabular data where complex styling or interaction is not required. This is perfect for disp
5 min read
Create Navbars UI using React and Tailwind CSS A UI plays an important role because a clean, well-designed interface creates a positive first impression and if the UI is good then users can stay on our website some more time and if the UI is bad then they can not stay on our site for more time. we will see how to Create Navbars UI using React an
5 min read