{"componentChunkName":"component---src-pages-components-select-code-mdx","path":"/components/select/code/","result":{"pageContext":{"frontmatter":{"title":"Select","description":"Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/select/code.mdx","titleType":"prepend","MdxNode":{"id":"cd2a094e-e1bb-58ff-a858-49c871be6060","children":[],"parent":"47ee8c94-a144-575d-b14e-253cdc669639","internal":{"content":"---\ntitle: Select\ndescription: Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n<ComponentDemo\n  links={{\n    React: 'https://react.carbondesignsystem.com/?path=/story/select--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-select--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvselect--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=select',\n  }}\n  knobs={{\n    Select: ['disabled', 'inline', 'invalid', 'light'],\n    SelectItem: ['disabled', 'hidden'],\n    SelectItemGroup: ['disabled'],\n  }}>\n  {`\n<Select\n  defaultValue=\"placeholder-item\"\n  helperText=\"Optional helper text.\"\n  id=\"select-1\"\n  invalidText=\"A valid value is required\"\n  labelText=\"Select\"\n>\n  <SelectItem\n    text=\"Choose an option\"\n    value=\"placeholder-item\"\n  />\n  <SelectItemGroup\n    label=\"Category 1\"\n  >\n    <SelectItem\n      text=\"Option 1\"\n      value=\"option-1\"\n    />\n    <SelectItem\n      text=\"Option 2\"\n      value=\"option-2\"\n    />\n  </SelectItemGroup>\n  <SelectItemGroup\n    label=\"Category 2\"\n  >\n    <SelectItem\n      text=\"Option 3\"\n      value=\"option-3\"\n    />\n    <SelectItem\n      text=\"Option 4\"\n      value=\"option-4\"\n    />\n  </SelectItemGroup>\n</Select>\n  `}\n</ComponentDemo>\n","type":"Mdx","contentDigest":"9594a3350b25960cdc7aedbf9094581c","counter":1536,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Select","description":"Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Select\ndescription: Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n<ComponentDemo\n  links={{\n    React: 'https://react.carbondesignsystem.com/?path=/story/select--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-select--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvselect--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=select',\n  }}\n  knobs={{\n    Select: ['disabled', 'inline', 'invalid', 'light'],\n    SelectItem: ['disabled', 'hidden'],\n    SelectItemGroup: ['disabled'],\n  }}>\n  {`\n<Select\n  defaultValue=\"placeholder-item\"\n  helperText=\"Optional helper text.\"\n  id=\"select-1\"\n  invalidText=\"A valid value is required\"\n  labelText=\"Select\"\n>\n  <SelectItem\n    text=\"Choose an option\"\n    value=\"placeholder-item\"\n  />\n  <SelectItemGroup\n    label=\"Category 1\"\n  >\n    <SelectItem\n      text=\"Option 1\"\n      value=\"option-1\"\n    />\n    <SelectItem\n      text=\"Option 2\"\n      value=\"option-2\"\n    />\n  </SelectItemGroup>\n  <SelectItemGroup\n    label=\"Category 2\"\n  >\n    <SelectItem\n      text=\"Option 3\"\n      value=\"option-3\"\n    />\n    <SelectItem\n      text=\"Option 4\"\n      value=\"option-4\"\n    />\n  </SelectItemGroup>\n</Select>\n  `}\n</ComponentDemo>\n","fileAbsolutePath":"/zeit/26e993f/src/pages/components/select/code.mdx"}}}}