@paprika/checkbox

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

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG