Reactstrap Switch

Pro Component

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute.

We added a new design for the switches to look like the rest of the dashboard.

Since Reactstrap has not yet implemented this component into their framework, we will use the plain Bootstrap ones. But do not worry, they work only with css, you won’t need any custom JS.

Examples

Switch - primary

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components

function Example() {
  return (
    <>
      <label className="custom-toggle custom-toggle-primary">
        <input type="checkbox" checked="">
        <span className="custom-toggle-slider rounded-circle" data-label-off="OFF" data-label-on="ON"></span>
      </label>
    </>
  );
}

export default Example;

Switch - default

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components

function Example() {
  return (
    <>
      <label className="custom-toggle custom-toggle-default">
        <input type="checkbox" checked="">
        <span className="custom-toggle-slider rounded-circle" data-label-off="OFF" data-label-on="ON"></span>
      </label>
    </>
  );
}

export default Example;

Switch - danger

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components

function Example() {
  return (
    <>
      <label className="custom-toggle custom-toggle-danger">
        <input type="checkbox" checked="">
        <span className="custom-toggle-slider rounded-circle" data-label-off="OFF" data-label-on="ON"></span>
      </label>
    </>
  );
}

export default Example;

Switch - warning

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components

function Example() {
  return (
    <>
      <label className="custom-toggle custom-toggle-warning">
        <input type="checkbox" checked="">
        <span className="custom-toggle-slider rounded-circle" data-label-off="OFF" data-label-on="ON"></span>
      </label>
    </>
  );
}

export default Example;

Switch - success

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components

function Example() {
  return (
    <>
      <label className="custom-toggle custom-toggle-success">
        <input type="checkbox" checked="">
        <span className="custom-toggle-slider rounded-circle" data-label-off="OFF" data-label-on="ON"></span>
      </label>
    </>
  );
}

export default Example;

Switch - info

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components

function Example() {
  return (
    <>
      <label className="custom-toggle custom-toggle-info">
        <input type="checkbox" checked="">
        <span className="custom-toggle-slider rounded-circle" data-label-off="OFF" data-label-on="ON"></span>
      </label>
    </>
  );
}

export default Example;