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

Copy

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

Copy

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

Copy

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

Copy

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

Copy

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

Copy

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;