@paprika/checkbox
Description
Checkbox component displays a checkbox and label text beside it. When clicked it displays a checkmark. It can also have an indeterminate state which can be used to group checkboxes.
Installation
yarn add @paprika/checkbox
or with npm:
npm install @paprika/checkbox
Props
Checkbox
| Prop | Type | required | default | Description |
|---|---|---|---|---|
| a11yText | string | false | null | Used for aria-label on the checkbox input |
| checkedState | [ Checkbox.types.state.CHECKED, Checkbox.types.state.UNCHECKED, Checkbox.types.state.INDETERMINATE] | false | Checkbox.types.state.UNCHECKED | The checkbox state |
| children | node | false | null | Used for label contents |
| isDisabled | bool | false | false | Describe if the checkbox is disabled or not |
| onChange | func | false | () => {} | Callback triggered when the input state is changed |
| size | [ Checkbox.types.size.SMALL, Checkbox.types.size.MEDIUM, Checkbox.types.size.LARGE] | false | Checkbox.types.size.MEDIUM | Size provided by parent Group component |
| tabIndex | [number,string] | false | 0 | Value for tabindex attribute to override the default of 0. |
Usage
import Checkbox from "@paprika/checkbox";
<Checkbox onChange={handleChange} checkState={checkedStateValue>
Checkbox 1
</Checkbox>;