@chantelle/checkbox
v0.3.3
Published
The Checkbox component of the Chantelle Pattern Library
Downloads
5
Readme
Checkbox
Installation
yarn add @chantelle/checkbox
Usage
First, include the CSS in your HTML:
<link rel="stylesheet" href="node_modules/@chantelle/checkbox/dist/styles.css">
Note: you can import the CSS directly into your project if your bundler supports it:
import '@chantelle/checkbox/dist/styles.css';
React Component
import Button from '@chantelle/checkbox';
ReactDOM.render(
<Checkbox
id='basic_checkbox'
name='test_name'
labelText='Basic checkbox'
labelClass='custom-Label-Checkbox'
className='custom-Checkbox'
isChecked={checked}
isDisabled={false}
onChange={this.handleChange.bind(this)} />,
container
);
CSS API
To use the Checkbox component, add the .pl-checkbox
to the <Checkbox>
element to apply the styles.
<input
type='checkbox'
class='pl-checkbox'
checked='checked'>
<label for='my_checkbox'>my_checkbox</label>
</input>
State
Checkbox with disabled
attribute already apply the disabled styles. The .pl-checkbox--disabled
class is reserved for links that have the .pl-checkbox
class.