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|() => {}|