react-native-ui-lib
Version:
[](https://stand-with-ukraine.pp.ua)
230 lines (229 loc) • 8 kB
JSON
{
"name": "RadioButton",
"category": "controls",
"description": "A Radio Button component, should be wrapped with a RadioGroup",
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/RadioButtonScreen.js",
"images": [
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Default.gif?raw=true",
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Alignment.gif?raw=true",
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Custom.gif?raw=true",
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Individual.png?raw=true"
],
"props": [
{
"name": "value",
"type": "string | number | boolean",
"description": "The identifier value of the radio button. must be different than other RadioButtons in the same group"
},
{
"name": "selected",
"type": "boolean",
"description": "When using RadioButton without a RadioGroup, use this prop to toggle selection"
},
{
"name": "onPress",
"type": "(selected: boolean) => void",
"description": "Invoked when pressing the button"
},
{
"name": "disabled",
"type": "boolean",
"description": "Whether the radio button should be disabled"
},
{
"name": "color",
"type": "string",
"description": "The color of the radio button",
"default": "Colors.$backgroundPrimaryHeavy"
},
{
"name": "size",
"type": "number",
"description": "The size of the radio button, affect both width & height",
"default": "24"
},
{
"name": "borderRadius",
"type": "number",
"description": "The radio button border radius",
"default": "24"
},
{
"name": "label",
"type": "string",
"description": "A label for the radio button description"
},
{
"name": "labelStyle",
"type": "TextStyle",
"description": "Label style"
},
{
"name": "iconSource",
"type": "ImageSource",
"description": "Icon image source"
},
{
"name": "iconStyle",
"type": "ImageStyle",
"description": "Icon image style"
},
{
"name": "iconOnRight",
"type": "boolean",
"description": "Should the icon be on the right side of the label",
"default": "false"
},
{
"name": "contentOnLeft",
"type": "boolean",
"description": "Should the content be rendered left to the button"
},
{
"name": "containerStyle",
"type": "ViewStyle",
"description": "Additional styling for the container"
}
],
"snippet": [
"function Example(props) {",
" const [value, setValue] = useState(false);",
" const [value2, setValue2] = useState(false);",
" const [value3, setValue3] = useState(false);",
" return (",
" <View flex padding-s5 gap-s4>",
" <RadioButton label={'Radio Button'} selected={value} onPress={() => setValue(!value)}/>",
" <RadioButton label={'Green Radio Button'} color={Colors.green30} selected={value2} onPress={() => setValue2(!value2)}/>",
" <RadioButton label={'Square Radio Button'} borderRadius={0} size={20} selected={value3} onPress={() => setValue3(!value3)}/>",
" </View>",
" );",
"}"
],
"docs": {
"hero": {
"title": "RadioButton",
"description": "The radio button comes only in one size, and cannot be resized. Size: 24x24",
"type": "hero",
"layout": "horizontal",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/RadioButton/radiobutton_cover.png"
}
]
},
"tabs": [
{
"title": "Overview",
"sections": [
{
"type": "section",
"title": "Usage Examples",
"content": [
{
"value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=420-26307&embed-host=share"
}
]
},
{
"type": "table",
"columns": [
"Property",
"Preview"
],
"items": [
{
"title": "Un-Checked",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/RadioButton/radiobutton_states_unchecked.png"
}
]
},
{
"title": "Checked",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/RadioButton/radiobutton_states_checked.png"
}
]
},
{
"title": "Disabled - Un-Checked",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/RadioButton/radiobutton_states_disabled_unchecked.png"
}
]
},
{
"title": "Disabled - Checked",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/RadioButton/radiobutton_states_disabled_checked.png"
}
]
}
],
"title": "States"
},
{
"type": "table",
"columns": [
"Property",
"Preview"
],
"items": [
{
"title": "Label",
"description": "A label can be displayed next to the RadioButton. Use this style when the user needs to select from a fewer variety of choices. ",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/RadioButton/radiobutton_accessories_label.png"
}
]
}
],
"title": "Accessories"
},
{
"type": "section",
"layout": "horizontal",
"title": "Spec",
"description": "markdown: \n###Size\nThe checkbox comes only in one size, and cannot be resized.
\nSize: 24x24",
"content": [
{
"value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=420-28911&embed-host=share"
}
]
}
]
},
{
"title": "UX Guidelines",
"sections": [
{
"type": "section",
"layout": "horizontal",
"title": "RadioGroup",
"description": "Use the RadioGroup component to group a list of radio options.\n<Add link>",
"content": [
{
"value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=420-28944&embed-host=share"
}
]
},
{
"type": "section",
"title": "Layout",
"description": "When creating a settings screen, display controls on the right side only to keep alignment between various controls like toggleSwitch, radioButton and Checkbox.\nWhen selection is a part of a flow, displaying controls on the left is more appropriate.",
"content": [
{
"value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=420-26084&embed-host=share"
}
]
}
]
}
]
}
}