@rn-components-kit/checkbox

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