@lightspeed/cirrus-checkbox

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

Prop	Type	Description
id	string	Checkbox's ID
label	string or element	Checkbox's label
description	string or element	Description's text
disabled	boolean	Set the Checkbox in a disabled state
checked	boolean	Use true for checked, false for unchecked, undefined or not set for indeterminate
html property	string	Any extra properties passed will be added to the <Checkbox> tag

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.