@paprika/checkbox
v1.0.27
Published
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.
Downloads
13,219
Keywords
Readme
@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/checkboxor with npm:
npm install @paprika/checkboxProps
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>;