React Toggle Slider Switch

A customizable react toggle slider switch component. Simple to use with built-in label functionality and customization options.

Installation

To install the package, run:

Using npm:

npm install react-toggle-slider-switch

Using yarn:

yarn add react-toggle-slider-switch

Screenshot

Basic Usage

Here’s a basic example using a functional component with the ReactToggleSliderSwitch:

Copy code:

import React, { useState } from "react";
import ReactToggleSliderSwitch from "react-toggle-slider-switch";

const BasicExample: React.FC = () => {
  const [checked, setChecked] = useState<boolean>(false);

  const handleChange = (newChecked: boolean): void => {
    setChecked(newChecked);
  };

  return (
    <ReactToggleSliderSwitch
      checked={checked}
      onChange={handleChange}
      onColor="#22c55e"
      offColor="#d1d5db"
      checkedIcon={true}
      uncheckedIcon={true}
      height={28}
      width={70}
    />
  );
};

export default BasicExample;

Label Example

Here’s a custom example with additional styles, using the ReactToggleSliderSwitch component:

Copy code:

import React from "react";
import ReactToggleSliderSwitch from "react-toggle-slider-switch";

const LabelExample: React.FC = () => {
  const [checked, setChecked] = useState<boolean>(false);

  const handleChange = (newChecked: boolean): void => {
    setChecked(newChecked);
  };

  return (
    <ReactToggleSliderSwitch
      label="Label"
      checked={checked}
      onChange={handleChange}
      onColor="#22c55e"
      offColor="#d1d5db"
      checkedIcon={true}
      uncheckedIcon={true}
      height={28}
      width={70}
    />
  );
};

export default LabelExample;

Custom Example

Here’s an custom example with label using a functional component with the ReactToggleSliderSwitch:

Copy code:

import React from "react";
import ReactToggleSliderSwitch from "react-toggle-slider-switch";

const CustomExample: React.FC = () => {
  const [checked, setChecked] = useState<boolean>(false);

  const handleChange = (newChecked: boolean): void => {
    setChecked(newChecked);
  };

  return (
    <ReactToggleSliderSwitch
      label="Custom Label"
      checked={checked}
      onChange={handleChange}
      onColor="#0f0"
      offColor="#f00"
      height={28}
      width={70}
      checkedIcon={false}
      uncheckedIcon={false}
      switchBgClassName="custom-bg-class"
      switchHandleClassName="custom-handle-class"
      labelStyle={{ fontWeight: "bold", fontSize: "14px" }}
    />
  );
};

export default CustomExample;

Features

Customizable colors : Change the on and off switch colors.

Built-in label support : Automatically handles labels if you need one.

Drag & Click Behavior : You can click or drag to toggle the switch.

Custom icons : Supports custom icons for both checked and unchecked states.

Props

Prop	Type	Default	Description
checked	boolean	Required	The checked state of the switch. If true, the switch is set to checked.
onChange	(checked: boolean, event: Event, id?: string) => void	Required	Callback invoked when the user clicks or drags the switch. checked indicates the future state.
disabled	boolean	false	When true, the switch is non-interactive, and its colors are greyed out.
offColor	string	"#d1d5db"	The color of the switch when it is not checked. Accepts hex values (e.g., #888, #45abcd).
onColor	string	"#22c55e"	The color of the switch when it is checked. Accepts hex values (e.g., #080, #45abcd).
offHandleColor	string	"#fff"	The color of the handle when the switch is not checked. Accepts hex values (e.g., #fff, #45abcd).
onHandleColor	string	"#fff"	The color of the handle when the switch is checked. Accepts hex values (e.g., #fff, #45abcd).
outline	boolean	undefined	Specifies if the handle should have an outline when focused.
handleWidth	number	35	The width of the handle, measured in pixels.
label	string	undefined	The label to display alongside the switch.
labelPosition	"before" | "after"	"after"	Position of the label if the label is defined.
labelStyle	React.CSSProperties	undefined	Custom styles for the label (e.g., fontSize, color, etc.).
handleDiameter	number	undefined	Diameter of the handle, measured in pixels.
uncheckedHandleIcon	JSX.Element	undefined	Custom icon to display on the handle when the switch is not checked.
checkedHandleIcon	JSX.Element	undefined	Custom icon to display on the handle when the switch is checked.
uncheckedIcon	boolean | JSX.Element	defaultUncheckedIcon	Icon that will be shown when the switch is not checked. Set to false to show no icon.
checkedIcon	boolean | JSX.Element	defaultCheckedIcon	Icon that will be shown when the switch is checked. Set to false to show no icon.
boxShadow	string | null	undefined	Box-shadow of the handle of the switch.
activeBoxShadow	string	"0px 0px 2px 2px #3bf"	Box-shadow of the handle when focused or active.
height	number	28	Height of the switch background in pixels.
width	number	70	Width of the switch background in pixels.
borderRadius	number	undefined	Border radius of the switch and handle.
className	string	undefined	Custom className for the outer shell of the switch.
id	string	undefined	ID of the embedded checkbox.
switchBgClassName	string	""	Custom className for the switch background.
switchHandleClassName	string	""	Custom className for the switch handle.
checkedIconClassName	string	""	Custom className for the checked icon.
uncheckedIconClassName	string	""	Custom className for the unchecked icon.
checkedIconStyle	React.CSSProperties	undefined	Custom styles for the checked icon.
uncheckedIconStyle	React.CSSProperties	undefined	Custom styles for the unchecked icon.

Development

You're welcome to contribute to react-toggle-switch. Keep in mind that big changes have to be thoroughly tested on different browsers and devices before they can be merged.

To set up the project:

Fork and clone the repository

Install dependencies:

npm install

Run the development server:

npm run dev

License

This project is licensed under the MIT License.