Dropdown – Carbon Design System

Default

This is a dropdown title.

<Dropdown
  ariaLabel="Dropdown"
  id="carbon-dropdown-example"
  items={items}
  label="Dropdown menu options"
  titleText="This is a dropdown title."
/>

<Dropdown
  ariaLabel="Dropdown"
  id="carbon-dropdown-example"
  items={items}
  label="Dropdown menu options"
  titleText="This is a dropdown title."
/>

ComboBox

This is a dropdown title.

CodeSandbox React Angular Vue Vanilla

<ComboBox
  ariaLabel="ComboBox"
  id="carbon-combobox-example"
  items={items}
  label="ComboBox menu options"
  titleText="This is a dropdown title."
/>

<ComboBox
  ariaLabel="ComboBox"
  id="carbon-combobox-example"
  items={items}
  label="ComboBox menu options"
  titleText="This is a dropdown title."
/>

MultiSelect

This is a dropdown title.

MultiSelect menu options

CodeSandbox React Angular Vue Vanilla

<MultiSelect
  ariaLabel="MultiSelect"
  id="carbon-multiselect-example"
  items={items}
  label="MultiSelect menu options"
  titleText="This is a dropdown title."
/>

<MultiSelect
  ariaLabel="MultiSelect"
  id="carbon-multiselect-example"
  items={items}
  label="MultiSelect menu options"
  titleText="This is a dropdown title."
/>

Filterable MultiSelect

This is a MultiSelect title.

CodeSandbox React Angular Vue Vanilla

<MultiSelect.Filterable
  ariaLabel="Filterable MultiSelect"
  id="carbon--filterable-multiselect-example"
  items={items}
  label="Filterable MultiSelect options"
  titleText="This is a MultiSelect title."
/>

<MultiSelect.Filterable
  ariaLabel="Filterable MultiSelect"
  id="carbon--filterable-multiselect-example"
  items={items}
  label="Filterable MultiSelect options"
  titleText="This is a MultiSelect title."
/>

Sample data

const items = [
  {
    id: 'option-1',
    text: 'Option 1',
  },
  {
    id: 'option-2',
    text: 'Option 2',
  },

Edit this page on GitHub

Components: Date picker

Dropdown: Usage