CheckBox
English | 中文
CheckBoxes allow users to complete tasks that involve making choices such as selecting options, or switching settings on or off.
How to use
npm install @rn-components-kit/checkbox --save
Preview | Code |
---|---|
Demo1 Code | |
Demo2 Code | |
Demo3 Code | |
Demo4 Code |
Props
style
title
titleStyle
iconSize
disabled
checked
checkedIconType
checkedIconColor
checkedImage
unCheckedIconType
unCheckedIconColor
unCheckedImage
animationType
onPress
Reference
Props
style
Allow you to customize style
Type | Required | Default |
---|---|---|
object | no | - |
title
Title of checkbox
Type | Required | Default |
---|---|---|
string | yes | - |
titleStyle
Allows you to customize title's style
Type | Required | Default |
---|---|---|
object | no | - |
iconSize
Size of icon (or width and height for image, if you specify checkedImage/unCheckedImage)
Type | Required | Default |
---|---|---|
number | no | 20 |
disabled
Determines whether checkbox is available
Type | Required | Default |
---|---|---|
boolean | no | false |
checked
Flag for checking the icon
Type | Required | Default |
---|---|---|
boolean | no | false |
checkedIconType
Checked icon (Icon Preset)
Type | Required | Default |
---|---|---|
string | no | 'check-square-fill' |
checkedIconColor
Color of checked icon
Type | Required | Default |
---|---|---|
string | no | '#1890FF' |
checkedImage
If you are not satisfied with icon preset, you can specify an image for checked icon
Type | Required | Default |
---|---|---|
string | no | - |
unCheckedIconType
UnChecked icon (Icon Preset)
Type | Required | Default |
---|---|---|
string | no | 'border' |
unCheckedIconColor
Color of unChecked icon
Type | Required | Default |
---|---|---|
string | no | '#BFBFBF' |
unCheckedImage
If you are not satisfied with icon preset, you can specify an image for unChecked icon
Type | Required | Default |
---|---|---|
string | no | - |
animationType
Determines which animation is adpoted when checked value changes
- none: no animation
- opacity: fade in/out
- size: zoom in/out
Type | Required | Default |
---|---|---|
enum('none' , 'opacity' , 'size' ) |
no | 'opacity' |
onPress
() => void
A callback will be triggered when checkbox is pressed
Type | Required | Default |
---|---|---|
function | no | () => {} |