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.