@lightspeed/cirrus-switch

Switch

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

Installation

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

Usage

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

Props

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

Example

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

// Controlled component (recommended)
class ControlledComponent extends React.Component {
  constructor(props) {
    super(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 (
      <div>
        <Switch id="feature-id" name="feature" checked={checked} onChange={this.handleChange} />
      </div>
    )
  }
}

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

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 .5.214.5.505v.99A.508.508 0 0 1 .5 2a.495.495 0 0 1-.5-.505v-.99zm3 0C3 .226 3.232 0 3.5 0c.276 0 .5.214.5.505v.99A.508.508 0 0 1 3.5 2a.495.495 0 0 1-.5-.505v-.99zm3 0C6 .226 6.232 0 6.5 0c.276 0 .5.214.5.505v.99A.508.508 0 0 1 6.5 2a.495.495 0 0 1-.5-.505v-.99zm3 0C9 .226 9.232 0 9.5 0c.276 0 .5.214.5.505v.99A.508.508 0 0 1 9.5 2a.495.495 0 0 1-.5-.505v-.99z" fill="#C4CACC" fill-rule="evenodd"></path>
      </svg>
    </span>
    <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>
      <svg className="cr-icon cr-icon-apps" style="width:0.75rem;height:0.75rem;" fill="#848a8a">
        <use xlinkHref="#cr-icon-apps" />
      </svg>
    </span>
  </span>
</label>