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.