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