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
Create Changelog Template using React and Tailwind CSS
A changelog is an essential tool for maintaining transparency and communication in a project by documenting changes, updates, and bug fixes and enhancements. This template will be built using React for the frontend framework and Tailwind CSS for the styling. The combination of these technologies all
3 min read
Create Command Palettes UI using React and Tailwind CSS
This article shows you how to create a Command Palette UI using React and Tailwind CSS. A command palette lets users easily search for and run commands within an app, making navigation faster and more efficient. We’ll walk you through building a simple and intuitive interface where users can type, s
4 min read
Create FAQs using React and Tailwind CSS
A Frequently Asked Questions section is a common feature found on websites and applications that helps users find answers to common queries in an organized manner. A well-designed FAQ can improve user experience reduce support requests and provide users with quick and easy access to helpful informat
5 min read
Create Dropdowns UI using React and Tailwind CSS
Dropdown UI components are often used in web applications for forms, navigation, or user preferences, allow users to select from a list of options by clicking a button, which will display a drop-down menu, in this article we will create a dropdown element using React for functionality and Tailwind C
3 min read