DEV Community

Michael Burrows
Michael Burrows

Posted on • Updated on • Originally published at


Build a custom React toggle switch component

Toggle switches are form components that allow users to choose between two opposing states.

They are commonly used to toggle settings in apps or even day/night mode on websites.

Here’s what our toggle switch will look once complete:

Alt Text

Let’s get started by creating a ToggleSwitch.js file with some basic checkbox markup:

import React from "react";
import "./ToggleSwitch.css";

const ToggleSwitch = () => {
  return (
    <label className="toggle-switch">
      <input type="checkbox" />
      <span className="switch" />

export default ToggleSwitch;
Enter fullscreen mode Exit fullscreen mode

As checkboxes have limited styling capabilities we will instead be styling the <span className="switch" />.

Add the following CSS to ToggleSwitch.css:

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
.toggle-switch input[type="checkbox"] {
  display: none;
.toggle-switch .switch {
  position: absolute;
  cursor: pointer;
  background-color: #ccc;
  border-radius: 25px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: background-color 0.2s ease;
.toggle-switch .switch::before {
  position: absolute;
  content: "";
  left: 2px;
  top: 2px;
  width: 21px;
  height: 21px;
  background-color: #aaa;
  border-radius: 50%;
  transition: transform 0.3s ease;
.toggle-switch input[type="checkbox"]:checked + .switch::before {
  transform: translateX(25px);
  background-color: #6699cc;
.toggle-switch input[type="checkbox"]:checked + .switch {
  background-color: #336699;
Enter fullscreen mode Exit fullscreen mode

At this point if you view the component it looks fully functional but in fact the value isn’t actually changing.

To change the value of the checkbox component we will be adding the following attributes:

checked – stores the input’s current value (true/false).
onChange – triggers whenever the switch is toggled and updating the component’s current value.

Modify ToggleSwitch.js so it contains the following attributes:

const ToggleSwitch = ({isToggled, onToggle}) => {
  return (
    <label className="toggle-switch">
      <input type="checkbox" checked={isToggled} onChange={onToggle} />
      <span className="switch" />
Enter fullscreen mode Exit fullscreen mode

Finally let’s add the component to our application.

As our component is stateless we also need to pass the isToggled value from the parent component:

import React, { useState } from "react";
import ToggleSwitch from "./components/ToggleSwitch";

function App() {
  const [isToggled, setIsToggled] = useState(false);
  return (
    <div className="App">
        onToggle={() => setIsToggled(!isToggled)}

export default App;
Enter fullscreen mode Exit fullscreen mode

Now you have a flexible toggle switch component to use in React projects.

Top comments (0)

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Articles for Your Portfolio

Integrate the articles of your profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the API: How to Fetch Your Articles for Your Portfolio with React