@lightspeed/cirrus-checkbox

Cirrus Checkbox Component

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@lightspeed/cirrus-checkbox
Minified + gzip package size for @lightspeed/cirrus-checkbox in KB

Readme

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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.