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:

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" />
    </label>
  );
};

export default ToggleSwitch;

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;
}

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" />
    </label>
  );
};

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">
      <ToggleSwitch
        isToggled={isToggled}
        onToggle={() => setIsToggled(!isToggled)}
      />
    </div>
  );
}

export default App;

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