react-checkboxify

react-checkboxify

Single Checkbox and group Checkboxes UI component for React
with incredible options for access to full customize with easy usage.

Install

Usage

import Checkbox, {GroupCheckbox} from 'react-checkboxify';
export <GroupCheckbox />;
export default () => <checkbox />;

Compatibility

IE / Edge	Firefox	Chrome	Safari	Electron
IE10, Edge	last 2.25 versions	last 2.25 versions	last 2.25 versions	last 2.25 versions

API

Checkbox

name	type	default	description
name	string
label	string	null	label of input for show to client
parentClassName	String	""	additional class name of parent div element
labelClassName	String	""	additional class name of label element
inputClassName	String	""	additional class name of root node
onChange	Function(e:Event, checked:Number)		called when checkbox is changed. e is native event, checked is original checked state.
checked	Boolean: true, false	false	same with native input checkbox
disabled	Boolean: true, false	false	use if for disable some checkbox in specific situation
customIcon	Obj {checked?: "iconPath", unChecked?: "iconPath", size : number }	null	with checked and unchecked key you can use any icon for your checkbox, also you can change size it with size key and number value

GroupCheckbox

name	type	default	description
list	Array	[]	use it for send list of items to render item with checkbox icon
setSelectedItems	React.SetState	null	add set state in props for gave all items checking = true, I set all Object into Array with checked:true value.
selectType	String: "single" | "multiple"	"single"	you can set use can select only one item or more.
hasSearch	Boolean	false	add search bar for use easier than of huge list
searchOption	Object	{label: "", className: "", disabled: false }	customize everything you need to change it in search component like default label, className and disabled option.
parentClassName	String	""	additional class name of parent div element
checkboxClassName	String	""	additional class name of label element
checkboxFilledClassName	String	""	additional class name of root node
labelClassName	String	""	additional class name of root node
customIcon	Obj {checked?: "iconPath", unChecked?: "iconPath", size : number }	null	with checked and unchecked key you can use any icon for your checkbox, also you can change size it with size key and number value

Online demo: https://mobinkaarimi.github.io/react-checkboxify/

License

react-checkboxify is released under the MIT license.