@rn-components-kit/radio

Radio

English | 中文

Radio buttons allow users to select one option from a set. It supports following features:

• disable click
• customized checked/unChecked icon
• three animation types

How to use

npm install @rn-components-kit/radio --save

Preview	Code
	Demo1 Code
	Demo2 Code
	Demo3 Code
	Demo4 Code

Reference

Props for Radio.Group

• style
• defaultValue
• onValueChange

style

Allow you to customize style

Type	Required	Default
object	no	-

defaultValue

Default value to speficy which radio button is selected initially

Type	Required	Default
any	no	-

onValueChange

(value: any) => void

Type	Required	Default
function	no	() => {}

A callback will be triggered when selected value changes

Props for Radio.Button

• style
• value
• title
• titleStyle
• iconSize
• disabled
• checked
• checkedIconType
• checkedIconColor
• checkedImage
• unCheckedIconType
• unCheckedIconColor
• unCheckedImage
• animationType
• onPress

style

Allow you to customize style

Type	Required	Default
object	no	-

value

According to value for comparison, to determine whether the selected

Type	Required	Default
any	yes	-

title

Title of radio button

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 radio button 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-radio'

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	'circle'

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	'size'

onPress

() => void

A callback will be triggered when radio button is pressed

Type	Required	Default
function	no	() => {}