{"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":"23bef105-5970-5d50-ae3f-612b064631cc","children":[],"parent":"799d649e-2df2-5d6a-8455-c33c5bc035dc","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  <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":"061d91534a4f8676c49a64f051fe156a","counter":1528,"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  <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/26e993f/src/pages/components/radio-button/code.mdx"}}}}