Build a Toggle Switch Button Component in React

A toggle switch button, also known as a two-state button, is a control element used in user interfaces to represent two distinct and opposite states, typically "on" and "off." It provides a quick and intuitive way for users to enable or disable a feature, setting, or option.

In this tutorial, we will build a Toggle switch button component that shows or sets either the ON or OFF state in React.

Table of Contents

• Step 1: Install React Project
• Step 2: Create New Component
• Step 3: Style Toggle Button
• Step 4: Build Toggle Switch
• Step 5: Register Toggle in Global Component
• Step 6: Run React Server

Preview

Step 1: Install React Project

Use the npx package runner tool to create a new React app; you must execute the given command from the terminal window.

npx create-react-app react-blog

As soon as the project is installed; move inside the project folder:

cd react-blog

Step 2: Create New Component

A component file refers to a specific functionality; thus for following the concept of reusability make the components/ directory and also create the ToggleButton.js file with the given code.

import React from 'react'
function ToggleButton() {
  return (
    <div>ToggleButton</div>
  )
}
export default ToggleButton

Step 3: Style Toggle Button

In this step, we are going to write a couple of CSS codes; this custom CSS code will style and customise the toggle switch button.

Head over to components/Toggle.css file then paste the following code to the file.

.toggle-button {
  width: 58px;
  height: 34px;
  position: relative;
  display: inline-flex;
}
.toggle-button input {
  width: 0;
  height: 0;
}
.toggle-btn {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  transition: 0.6s;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  -o-transition: 0.6s;
  position: absolute;
  background-color: rgb(245, 244, 244);
  border-radius: 32px;
  -webkit-border-radius: 32px;
  -moz-border-radius: 32px;
  -ms-border-radius: 32px;
  -o-border-radius: 32px;
}
.toggle-btn:before {
  position: absolute;
  content: "";
  height: 25px;
  width: 24px;
  left: 6px;
  bottom: 6px;
  background-color: #fff;
  transition: 0.6s;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  -o-transition: 0.6s;
  border-radius: 32px;
  -webkit-border-radius: 32px;
  -moz-border-radius: 32px;
  -ms-border-radius: 32px;
  -o-border-radius: 32px;
}
.toggle-button input:checked + .toggle-btn {
  background-color: #1244f7;
}
.toggle-button input:checked + .toggle-btn:before {
  -webkit-transform: translateX(28px);
  -ms-transform: translateX(28px);
  transform: translateX(28px);
  -moz-transform: translateX(28px);
  -o-transform: translateX(28px);
}
.toggle-btn.circle {
  border-radius: 33px;
  -webkit-border-radius: 33px;
  -moz-border-radius: 33px;
  -ms-border-radius: 33px;
  -o-border-radius: 33px;
}
.toggle-btn.circle:before {
  border-radius: 51%;
  -webkit-border-radius: 51%;
  -moz-border-radius: 51%;
  -ms-border-radius: 51%;
  -o-border-radius: 51%;
}

Step 4: Build Toggle Switch

Create the ToggleButton const, pass value, onSwitch, and circle arguments. Define the label, then set the input and span for creating the toggle button.

Thus, add given code to the components/ToggleButton.js file.

import "./Toggle.css";
const ToggleButton = ({ value, onSwitch, circle }) => {
  return (
    <div>
      <h2>React Toggle Switch Button Example</h2>
      <label className="toggle-button">
        <input type="checkbox" checked={value} onChange={onSwitch} />
        <span className={`toggle-btn ${circle ? "circle" : ""}`}></span>
      </label>
    </div>
  );
};
export default ToggleButton;

Step 5: Register Toggle in Global Component

Our button component is ready, but it won’t show on the browser; therefore, we have to register it inside the global component file.

Update the code into the App.js file as mentioned below.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import ToggleButton from "./components/ToggleButton";
function App() {
  return (
    <div className="container mt-3">
      <ToggleButton />
    </div>
  );
}
export default App;

Step 6: Run React Server

We are done with the coding part; lastly we have to invoke the react app by running the given command from the terminal.

You can use the given url to view the app.

npm start

http://localhost:3000

Thanks for reading !!!

#react