react-native-ui-lib/src/components/radioButton/radioButton.api.json

[](https://stand-with-ukraine.pp.ua)

{
  "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"
              }
            ]
          }
        ]
      }
    ]
  }
}