{"componentChunkName":"component---src-pages-components-dropdown-code-mdx","path":"/components/dropdown/code/","result":{"pageContext":{"frontmatter":{"title":"Dropdown","description":"Dropdowns present a list of options that can be used to filter or sort existing content. They can also be used as menus.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/dropdown/code.mdx","titleType":"prepend","MdxNode":{"id":"5cd44396-8546-579e-8335-3fbaf99eb19e","children":[],"parent":"580412a2-fc17-5d60-bba7-afeac2041280","internal":{"content":"---\ntitle: Dropdown\ndescription: Dropdowns present a list of options that can be used to filter or sort existing content. They can also be used as menus.\ntabs: [\"Code\", \"Usage\", \"Style\", \"Accessibility\"]\n---\n\nimport items from \"../../../data/components/dropdown.js\";\n\n## Default\n\n<ComponentDemo\n  scope={{ items }}\n  knobs={{ Dropdown: [\"light\", \"disabled\"] }}\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/dropdown--default\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-dropdown--basic\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvdropdown--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=dropdown\",\n  }}\n>{`\n<Dropdown\n  ariaLabel=\"Dropdown\"\n  id=\"carbon-dropdown-example\"\n  items={items}\n  label=\"Dropdown menu options\"\n  titleText=\"This is a dropdown title.\"\n/>\n`}</ComponentDemo>\n\n## ComboBox\n\n<ComponentDemo\n  scope={{ items }}\n  knobs={{ ComboBox: [\"light\", \"disabled\"] }}\n  links={{\n    React: \"http://react.carbondesignsystem.com/?path=/story/combobox--default\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-combobox--basic\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvcombobox--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=combo-box\",\n  }}\n>{`\n<ComboBox\n  ariaLabel=\"ComboBox\"\n  id=\"carbon-combobox-example\"\n  items={items}\n  label=\"ComboBox menu options\"\n  titleText=\"This is a dropdown title.\"\n/>\n`}</ComponentDemo>\n\n## MultiSelect\n\n<ComponentDemo\n  scope={{ items }}\n  knobs={{ MultiSelect: [\"light\", \"disabled\"] }}\n  links={{\n    React:\n      \"http://react.carbondesignsystem.com/?path=/story/multiselect--default\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-combobox--multi-select\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=multi-select\",\n  }}\n>{`\n<MultiSelect\n  ariaLabel=\"MultiSelect\"\n  id=\"carbon-multiselect-example\"\n  items={items}\n  label=\"MultiSelect menu options\"\n  titleText=\"This is a dropdown title.\"\n/>\n`}</ComponentDemo>\n\n## Filterable MultiSelect\n\n<ComponentDemo\n  scope={{ items }}\n  knobs={{ MultiSelect: [\"light\", \"disabled\"] }}\n  links={{\n    React:\n      \"http://react.carbondesignsystem.com/?path=/story/multiselect--default\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-combobox--multi-select\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=multi-select\",\n  }}\n>{`\n<MultiSelect.Filterable\n  ariaLabel=\"Filterable MultiSelect\"\n  id=\"carbon--filterable-multiselect-example\"\n  items={items}\n  label=\"Filterable MultiSelect options\"\n  titleText=\"This is a MultiSelect title.\"\n/>\n`}</ComponentDemo>\n\n## Sample data\n\n```javascript\nconst items = [\n  {\n    id: \"option-1\",\n    text: \"Option 1\",\n  },\n  {\n    id: \"option-2\",\n    text: \"Option 2\",\n  },\n  {\n    id: \"option-3\",\n    text: \"Option 3\",\n  },\n  {\n    id: \"option-4\",\n    text: \"Option 4\",\n  },\n];\n```\n","type":"Mdx","contentDigest":"d9e652397e31aeba86b5e06fc0948c58","counter":1483,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Dropdown","description":"Dropdowns present a list of options that can be used to filter or sort existing content. They can also be used as menus.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Dropdown\ndescription: Dropdowns present a list of options that can be used to filter or sort existing content. They can also be used as menus.\ntabs: [\"Code\", \"Usage\", \"Style\", \"Accessibility\"]\n---\n\nimport items from \"../../../data/components/dropdown.js\";\n\n## Default\n\n<ComponentDemo\n  scope={{ items }}\n  knobs={{ Dropdown: [\"light\", \"disabled\"] }}\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/dropdown--default\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-dropdown--basic\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvdropdown--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=dropdown\",\n  }}\n>{`\n<Dropdown\n  ariaLabel=\"Dropdown\"\n  id=\"carbon-dropdown-example\"\n  items={items}\n  label=\"Dropdown menu options\"\n  titleText=\"This is a dropdown title.\"\n/>\n`}</ComponentDemo>\n\n## ComboBox\n\n<ComponentDemo\n  scope={{ items }}\n  knobs={{ ComboBox: [\"light\", \"disabled\"] }}\n  links={{\n    React: \"http://react.carbondesignsystem.com/?path=/story/combobox--default\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-combobox--basic\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvcombobox--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=combo-box\",\n  }}\n>{`\n<ComboBox\n  ariaLabel=\"ComboBox\"\n  id=\"carbon-combobox-example\"\n  items={items}\n  label=\"ComboBox menu options\"\n  titleText=\"This is a dropdown title.\"\n/>\n`}</ComponentDemo>\n\n## MultiSelect\n\n<ComponentDemo\n  scope={{ items }}\n  knobs={{ MultiSelect: [\"light\", \"disabled\"] }}\n  links={{\n    React:\n      \"http://react.carbondesignsystem.com/?path=/story/multiselect--default\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-combobox--multi-select\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=multi-select\",\n  }}\n>{`\n<MultiSelect\n  ariaLabel=\"MultiSelect\"\n  id=\"carbon-multiselect-example\"\n  items={items}\n  label=\"MultiSelect menu options\"\n  titleText=\"This is a dropdown title.\"\n/>\n`}</ComponentDemo>\n\n## Filterable MultiSelect\n\n<ComponentDemo\n  scope={{ items }}\n  knobs={{ MultiSelect: [\"light\", \"disabled\"] }}\n  links={{\n    React:\n      \"http://react.carbondesignsystem.com/?path=/story/multiselect--default\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-combobox--multi-select\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=multi-select\",\n  }}\n>{`\n<MultiSelect.Filterable\n  ariaLabel=\"Filterable MultiSelect\"\n  id=\"carbon--filterable-multiselect-example\"\n  items={items}\n  label=\"Filterable MultiSelect options\"\n  titleText=\"This is a MultiSelect title.\"\n/>\n`}</ComponentDemo>\n\n## Sample data\n\n```javascript\nconst items = [\n  {\n    id: \"option-1\",\n    text: \"Option 1\",\n  },\n  {\n    id: \"option-2\",\n    text: \"Option 2\",\n  },\n  {\n    id: \"option-3\",\n    text: \"Option 3\",\n  },\n  {\n    id: \"option-4\",\n    text: \"Option 4\",\n  },\n];\n```\n","fileAbsolutePath":"/zeit/3b23ef32/src/pages/components/dropdown/code.mdx"}}}}