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.