Toggle Switch

import { useState } from "react";
import "./ToggleSwitch.scss";
export const ToggleSwitch = () => {
  const [switchOn, setSwitchOn] = useState(false);
  return (
    <div id="ToggleSwitch">
      <label className={switchOn ? "switch_button active" : "switch_button"}>
        <input
          type={"checkbox"}
          checked={switchOn}
          onChange={() => setSwitchOn(!switchOn)}
        />
        <span
          className={switchOn ? "on_off_switch active" : "on_off_switch"}
        ></span>
      </label>
    </div>
  );
};

#ToggleSwitch {
  .switch_button {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 18px;
    background-color: var(--inline-color-gray15);
    &.active {
      background-color: var(--color-brand-toneup-red);
    }
    & > input {
      opacity: 0;
    }
    span {
      position: absolute;
      display: inline-block;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: white;
      top: 2px;
      left: 2px;
      transition: all 0.2s ease;
      &.active {
        transform: translateX(18px);
      }
    }
  }
}