{"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":"72dfb9fa-3178-5277-a559-89bb5c144c26","children":[],"parent":"e39c5410-ef05-5d32-8f6a-43c1f28ca17d","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<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<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<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<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":"1aaa304071b17970333bc08509a228ea","counter":1513,"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<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<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<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<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/3f757860/src/pages/components/dropdown/code.mdx"}}}}