UNPKG

react-native-ui-lib

Version:

[![SWUbanner](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct.svg)](https://stand-with-ukraine.pp.ua)

230 lines (229 loc) 8 kB
{ "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" } ] } ] } ] } }