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>