@lightspeed/cirrus-checkbox

6.0.3 • Public • Published

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.

Readme

Keywords

none

Package Sidebar

Install

npm i @lightspeed/cirrus-checkbox

Weekly Downloads

9

Version

6.0.3

License

MIT

Unpacked Size

18.1 kB

Total Files

7

Last publish

Collaborators

  • kurt.bergeron
  • lightspeedhq
  • ls-guillaume-lambert
  • ls-frederic-bouchard
  • anomen