{"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":"574d3d4d-d16f-5229-a239-b099baffda5b","children":[],"parent":"2a444c59-d301-5dec-90fa-811dcb3e3d01","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  {`\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":"26afc51da7942522855ac1e39fe0c302","counter":1539,"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  {`\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/3b23ef32/src/pages/components/select/code.mdx"}}}}