@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.

    Keywords

    none

    Install

    npm i @lightspeed/cirrus-checkbox

    DownloadsWeekly Downloads

    60

    Version

    6.0.3

    License

    MIT

    Unpacked Size

    18.1 kB

    Total Files

    7

    Last publish

    Collaborators

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