Cirrus Switch Component


5.0.63 years ago4 years agoMinified + gzip package size for @lightspeed/cirrus-switch in KB



Switch component is a visual representation of an input type checkbox.


First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

If using Yarn:

yarn add @lightspeed/cirrus-switch

Or using npm:

npm i -S @lightspeed/cirrus-switch


To empower our users to turn settings on or off we offer them the switch. A visual indicator and control that shows our users if it’s enabled or not.

When the switch enables content to be active or disabled, make sure there is a clear state between those two states.

Like stated in the Checkbox component, Switches are only for turning settings on or off, NOT for opting in or out of something.

Import required styles in your .scss:

@import '@lightspeed/cirrus-switch/Switch.scss';

React Component


Prop Type Description
id string Input ID (recommended for accessibility)
name string Input name
checked boolean Checked component
disabled boolean Disabled component
onChange function Triggers when the input value (checked) changes, callback returns event
html property string Any extra properties passed will be added to the <input> element


import React from 'react';
import Switch from '@lightspeed/cirrus-switch';

// Controlled component (recommended)
class ControlledComponent extends React.Component {
  constructor(props) {
    this.state = {
      checked: false,
    this.handleChange = this.handleChange.bind(this);

  handleChange(event) {
    this.setState({ checked: event.target.checked });

  render() {
    const { checked } = this.state;
    return (
        <Switch id="feature-id" name="feature" checked={checked} onChange={this.handleChange} />

// Half-controlled component (state is handled inside the `<Switch>`)
const HalfControlledComponent = () => (
    <Switch id="feature-id" name="feature" value="on" />

export { ControlledComponent, HalfControlledComponent };

CSS Component

Component classes

Type Class
base .cr-switch
input .cr-switch__input
wrapper .cr-switch__wrapper
slider .cr-switch__slider
icon wrapper .cr-switch__icon-wrapper

Component HTML

The Cirrus icon sprite needs to be included to reference the icons using <use /> tag.

<label role="presentation" class="cr-switch">
  <input id="feature1" name="feature1" class="cr-switch__input" type="checkbox" value="1" />
  <span class="cr-switch__wrapper">
    <span class="cr-switch__slider">
      <svg width="10" height="2" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 .505C0 .226.232 0 .5 0c.276 0 . 0 0 1 .5 2a.495.495 0 0 1-.5-.505v-.99zm3 0C3 .226 3.232 0 3.5 0c.276 0 . 0 0 1 3.5 2a.495.495 0 0 1-.5-.505v-.99zm3 0C6 .226 6.232 0 6.5 0c.276 0 . 0 0 1 6.5 2a.495.495 0 0 1-.5-.505v-.99zm3 0C9 .226 9.232 0 9.5 0c.276 0 . 0 0 1 9.5 2a.495.495 0 0 1-.5-.505v-.99z" fill="#C4CACC" fill-rule="evenodd"></path>
    <span class="cr-switch__icon-wrapper">
      <svg className="cr-icon cr-icon-apps" style="width:0.75rem;height:0.75rem;" fill="#fff">
        <use xlinkHref="#cr-icon-apps" />
      <svg className="cr-icon cr-icon-apps" style="width:0.75rem;height:0.75rem;" fill="#848a8a">
        <use xlinkHref="#cr-icon-apps" />

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.