@lightspeed/cirrus-checkbox v6.0.3

Checkbox

Checkbox component that supports the indeterminate state.

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-checkbox

Or using npm:

npm i -S @lightspeed/cirrus-checkbox

Usage

The use case of a checkbox is often confused with the one of a switch. The primary use case for a checkbox is when our user can select multiple values or to opt-in on something. The best and easiest way to remember if you should use a checkbox or a switch is by checking if the function is answering: Yes/No --> <Checkbox> On/Off --> <Switch>.

Never use a checkbox to turn something On/Off

Import required styles in your .scss:

@import '@lightspeed/cirrus-checkbox/Checkbox.scss';

React Component

Props

Example

import React from 'react';
import Checkbox from '@lightspeed/cirrus-checkbox';

const handleChange = (event) => {
  console.log(event.target.value);
}

const MyComponent = () =>
  <div>
    <Checkbox
      id="checkbox"
      name="checkbox"
      label="checkbox"
      data-attribute="custom attribute"
      checked={true}
      onChange={handleChange}
    />
  </div>;

export default MyComponent;

CSS Component

Not available.