{"componentChunkName":"component---src-pages-components-radio-button-code-mdx","path":"/components/radio-button/code/","result":{"pageContext":{"frontmatter":{"title":"Radio button","description":"Radio buttons are used when two or more options are mutually exclusive, meaning the user must select only one option.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/radio-button/code.mdx","titleType":"prepend","MdxNode":{"id":"770a9e32-24fd-5be1-8ece-701fae0611c0","children":[],"parent":"e8dbd4e3-68cc-53b7-a6d3-bd5795910534","internal":{"content":"---\ntitle: Radio button\ndescription: Radio buttons are used when two or more options are mutually exclusive, meaning the user must select only one option.\ntabs: [\"Code\", \"Usage\", \"Style\", \"Accessibility\"]\n---\n\n## Radio button\n\n<ComponentDemo\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/radiobuttongroup--default\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-radio--basic\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvradiobutton--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=radio-button\",\n  }}\n  knobs={{\n    RadioButtonGroup: [\"orientation\", \"labelPosition\"],\n  }}\n>\n  {`\n  <FormGroup\n  legendText=\"Radio Button heading\"\n>\n  <RadioButtonGroup\n    defaultSelected=\"default-selected\"\n    legend=\"Group Legend\"\n    name=\"radio-button-group\"\n    valueSelected=\"default-selected\"\n  >\n    <RadioButton\n      id=\"radio-1\"\n      labelText=\"Radio button label\"\n      value=\"standard\"\n    />\n    <RadioButton\n      id=\"radio-2\"\n      labelText=\"Radio button label\"\n      value=\"default-selected\"\n    />\n    <RadioButton\n      id=\"radio-3\"\n      labelText=\"Radio button label\"\n      value=\"disabled\"\n    />\n  </RadioButtonGroup>\n</FormGroup>\n  `}\n</ComponentDemo>\n","type":"Mdx","contentDigest":"f575cbf046d7261df1ed3e67cf522d6d","counter":1531,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Radio button","description":"Radio buttons are used when two or more options are mutually exclusive, meaning the user must select only one option.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Radio button\ndescription: Radio buttons are used when two or more options are mutually exclusive, meaning the user must select only one option.\ntabs: [\"Code\", \"Usage\", \"Style\", \"Accessibility\"]\n---\n\n## Radio button\n\n<ComponentDemo\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/radiobuttongroup--default\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-radio--basic\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvradiobutton--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=radio-button\",\n  }}\n  knobs={{\n    RadioButtonGroup: [\"orientation\", \"labelPosition\"],\n  }}\n>\n  {`\n  <FormGroup\n  legendText=\"Radio Button heading\"\n>\n  <RadioButtonGroup\n    defaultSelected=\"default-selected\"\n    legend=\"Group Legend\"\n    name=\"radio-button-group\"\n    valueSelected=\"default-selected\"\n  >\n    <RadioButton\n      id=\"radio-1\"\n      labelText=\"Radio button label\"\n      value=\"standard\"\n    />\n    <RadioButton\n      id=\"radio-2\"\n      labelText=\"Radio button label\"\n      value=\"default-selected\"\n    />\n    <RadioButton\n      id=\"radio-3\"\n      labelText=\"Radio button label\"\n      value=\"disabled\"\n    />\n  </RadioButtonGroup>\n</FormGroup>\n  `}\n</ComponentDemo>\n","fileAbsolutePath":"/zeit/3b23ef32/src/pages/components/radio-button/code.mdx"}}}}