Carbon Design System

Code:

<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->
<div class="bx--form-item">
  <div class="bx--dropdown__wrapper ">
    <span id="example-ly43i3n3f3k-label" class="bx--label">Dropdown label</span>
    <div class="bx--form__helper-text">Optional helper text.</div>
    <div data-dropdown data-value
      class="bx--dropdown   ">
      <button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-ly43i3n3f3k-menu" aria-labelledby="example-ly43i3n3f3k-label example-ly43i3n3f3k-value" type="button">
        <span class="bx--dropdown-text__inner" id="example-ly43i3n3f3k-value"> Dropdown option </span>
        <span class="bx--dropdown__arrow-container">
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
        </span>
      </button>
      <ul class="bx--dropdown-list" id="example-ly43i3n3f3k-menu" role="menu" tabindex="0" id="example-ly43i3n3f3k-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-ly43i3n3f3k-label">
        <li data-option data-value="all" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-ly43i3n3f3k-item0">Option 1</a>
        </li>
        <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ly43i3n3f3k-item1">Option 2</a>
        </li>
        <li data-option data-value="staging" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ly43i3n3f3k-item2">Option 3</a>
        </li>
        <li data-option data-value="dea" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ly43i3n3f3k-item3">Option 4</a>
        </li>
        <li data-option data-value="router" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ly43i3n3f3k-item4">Option 5</a>
        </li>
        <li data-option data-value="loremipsum" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ly43i3n3f3k-item5">An example option that is really long to show what should be done to handle long text</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="bx--form-item">
  <div class="bx--dropdown__wrapper ">
    <span id="example-qpvbwdk3449-label" class="bx--label">Dropdown label</span>
    <div class="bx--form__helper-text">Optional helper text here; if message is more than one line text
      should wrap (~100 character count maximum)</div>
    <div data-dropdown data-value
      class="bx--dropdown   ">
      <button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-qpvbwdk3449-menu" aria-labelledby="example-qpvbwdk3449-label example-qpvbwdk3449-value" type="button">
        <span class="bx--dropdown-text__inner" id="example-qpvbwdk3449-value"> Dropdown option </span>
        <span class="bx--dropdown__arrow-container">
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
        </span>
      </button>
      <ul class="bx--dropdown-list"  role="menu" tabindex="0" id="example-qpvbwdk3449-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-qpvbwdk3449-label">
        <li data-option data-value="all" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-qpvbwdk3449-item0">Option 1</a>
        </li>
        <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-qpvbwdk3449-item1">Option 2</a>
        </li>
        <li data-option data-value="staging" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-qpvbwdk3449-item2">Option 3</a>
        </li>
        <li data-option data-value="dea" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-qpvbwdk3449-item3">Option 4</a>
        </li>
        <li data-option data-value="router" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-qpvbwdk3449-item4">Option 5</a>
        </li>
        <li data-option data-value="loremipsum" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-qpvbwdk3449-item5">An example option that is really long to show what should be done to handle long text</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="bx--form-item">
  <div class="bx--dropdown__wrapper ">
    <span id="example-12cagncsq8k8-label" class="bx--label bx--label--disabled" aria-disabled="true">Dropdown label</span>
    <div class="bx--form__helper-text bx--form__helper-text--disabled" aria-disabled="true">Optional helper text
      here; if message is more than one line text
      should wrap (~100 character count maximum)</div>
    <div data-dropdown data-value
      class="bx--dropdown bx--dropdown--disabled">
      <button disabled class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-12cagncsq8k8-menu" aria-labelledby="example-12cagncsq8k8-label example-12cagncsq8k8-value" type="button">
        <span class="bx--dropdown-text__inner" id="example-12cagncsq8k8-value"> Dropdown option </span>
        <span class="bx--dropdown__arrow-container">
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
        </span>
      </button>
      <!-- Note: remove `tabindex` from disabled dropdown lists -->
      <ul class="bx--dropdown-list" id="example-12cagncsq8k8-menu" role="menu" id="example-12cagncsq8k8-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-12cagncsq8k8-label">
        <li data-option data-value="all" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-12cagncsq8k8-item0">Option 1</a>
        </li>
        <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-12cagncsq8k8-item1">Option 2</a>
        </li>
        <li data-option data-value="staging" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-12cagncsq8k8-item2">Option 3</a>
        </li>
        <li data-option data-value="dea" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-12cagncsq8k8-item3">Option 4</a>
        </li>
        <li data-option data-value="router" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-12cagncsq8k8-item4">Option 5</a>
        </li>
        <li data-option data-value="loremipsum" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-12cagncsq8k8-item5">An example option that is really long to show what should be done to handle long text</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="bx--form-item">
  <div class="bx--dropdown__wrapper ">
    <span id="example-a37w4i5rhyp-label" class="bx--label">Dropdown label</span>
    <div class="bx--form__helper-text">Optional helper text
      here; if message is more than one line text
      should wrap (~100 character count maximum)</div>
    <div data-dropdown data-value
      class="bx--dropdown bx--dropdown--invalid  "
      data-invalid>
      <button  class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-a37w4i5rhyp-menu" aria-labelledby="example-a37w4i5rhyp-label example-a37w4i5rhyp-value" type="button">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__invalid-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.2 1 1 4.2 1 8s3.2 7 7 7 7-3.1 7-7-3.1-7-7-7zm-.5 3h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z"></path><path d="M7.5 4h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z" data-icon-path="inner-path" opacity="0"></path></svg>
        <span class="bx--dropdown-text__inner" id="example-a37w4i5rhyp-value"> Dropdown option </span>
        <span class="bx--dropdown__arrow-container">
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
        </span>
      </button>
      <ul class="bx--dropdown-list" id="example-a37w4i5rhyp-menu" role="menu" tabindex="0" id="example-a37w4i5rhyp-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-a37w4i5rhyp-label">
        <li data-option data-value="all" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-a37w4i5rhyp-item0">Option 1</a>
        </li>
        <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-a37w4i5rhyp-item1">Option 2</a>
        </li>
        <li data-option data-value="staging" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-a37w4i5rhyp-item2">Option 3</a>
        </li>
        <li data-option data-value="dea" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-a37w4i5rhyp-item3">Option 4</a>
        </li>
        <li data-option data-value="router" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-a37w4i5rhyp-item4">Option 5</a>
        </li>
        <li data-option data-value="loremipsum" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-a37w4i5rhyp-item5">An example option that is really long to show what should be done to handle long text</a>
        </li>
      </ul>
    </div>
    <div class="bx--form-requirement">
      This is not a validation message
    </div>
  </div>
</div>

Code:

<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->
<div class="bx--form-item">
  <div class="bx--dropdown__wrapper ">
    <span id="example-ly43i3n3f3k-label" class="bx--label">Dropdown label</span>
    <div class="bx--form__helper-text">Optional helper text.</div>
    <div data-dropdown data-value
      class="bx--dropdown bx--dropdown--up  ">
      <button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-ly43i3n3f3k-menu" aria-labelledby="example-ly43i3n3f3k-label example-ly43i3n3f3k-value" type="button">
        <span class="bx--dropdown-text__inner" id="example-ly43i3n3f3k-value"> Dropdown option </span>
        <span class="bx--dropdown__arrow-container">
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
        </span>
      </button>
      <ul class="bx--dropdown-list" id="example-ly43i3n3f3k-menu" role="menu" tabindex="0" id="example-ly43i3n3f3k-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-ly43i3n3f3k-label">
        <li data-option data-value="all" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-ly43i3n3f3k-item0">Option 1</a>
        </li>
        <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ly43i3n3f3k-item1">Option 2</a>
        </li>
        <li data-option data-value="staging" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ly43i3n3f3k-item2">Option 3</a>
        </li>
        <li data-option data-value="dea" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ly43i3n3f3k-item3">Option 4</a>
        </li>
        <li data-option data-value="router" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ly43i3n3f3k-item4">Option 5</a>
        </li>
        <li data-option data-value="loremipsum" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ly43i3n3f3k-item5">An example option that is really long to show what should be done to handle long text</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="bx--form-item">
  <div class="bx--dropdown__wrapper ">
    <span id="example-qpvbwdk3449-label" class="bx--label">Dropdown label</span>
    <div class="bx--form__helper-text">Optional helper text here; if message is more than one line text
      should wrap (~100 character count maximum)</div>
    <div data-dropdown data-value
      class="bx--dropdown bx--dropdown--up  ">
      <button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-qpvbwdk3449-menu" aria-labelledby="example-qpvbwdk3449-label example-qpvbwdk3449-value" type="button">
        <span class="bx--dropdown-text__inner" id="example-qpvbwdk3449-value"> Dropdown option </span>
        <span class="bx--dropdown__arrow-container">
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
        </span>
      </button>
      <ul class="bx--dropdown-list"  role="menu" tabindex="0" id="example-qpvbwdk3449-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-qpvbwdk3449-label">
        <li data-option data-value="all" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-qpvbwdk3449-item0">Option 1</a>
        </li>
        <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-qpvbwdk3449-item1">Option 2</a>
        </li>
        <li data-option data-value="staging" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-qpvbwdk3449-item2">Option 3</a>
        </li>
        <li data-option data-value="dea" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-qpvbwdk3449-item3">Option 4</a>
        </li>
        <li data-option data-value="router" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-qpvbwdk3449-item4">Option 5</a>
        </li>
        <li data-option data-value="loremipsum" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-qpvbwdk3449-item5">An example option that is really long to show what should be done to handle long text</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="bx--form-item">
  <div class="bx--dropdown__wrapper ">
    <span id="example-12cagncsq8k8-label" class="bx--label bx--label--disabled" aria-disabled="true">Dropdown label</span>
    <div class="bx--form__helper-text bx--form__helper-text--disabled" aria-disabled="true">Optional helper text
      here; if message is more than one line text
      should wrap (~100 character count maximum)</div>
    <div data-dropdown data-value
      class="bx--dropdown bx--dropdown--up bx--dropdown--disabled">
      <button disabled class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-12cagncsq8k8-menu" aria-labelledby="example-12cagncsq8k8-label example-12cagncsq8k8-value" type="button">
        <span class="bx--dropdown-text__inner" id="example-12cagncsq8k8-value"> Dropdown option </span>
        <span class="bx--dropdown__arrow-container">
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
        </span>
      </button>
      <!-- Note: remove `tabindex` from disabled dropdown lists -->
      <ul class="bx--dropdown-list" id="example-12cagncsq8k8-menu" role="menu" id="example-12cagncsq8k8-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-12cagncsq8k8-label">
        <li data-option data-value="all" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-12cagncsq8k8-item0">Option 1</a>
        </li>
        <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-12cagncsq8k8-item1">Option 2</a>
        </li>
        <li data-option data-value="staging" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-12cagncsq8k8-item2">Option 3</a>
        </li>
        <li data-option data-value="dea" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-12cagncsq8k8-item3">Option 4</a>
        </li>
        <li data-option data-value="router" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-12cagncsq8k8-item4">Option 5</a>
        </li>
        <li data-option data-value="loremipsum" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-12cagncsq8k8-item5">An example option that is really long to show what should be done to handle long text</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="bx--form-item">
  <div class="bx--dropdown__wrapper ">
    <span id="example-a37w4i5rhyp-label" class="bx--label">Dropdown label</span>
    <div class="bx--form__helper-text">Optional helper text
      here; if message is more than one line text
      should wrap (~100 character count maximum)</div>
    <div data-dropdown data-value
      class="bx--dropdown bx--dropdown--invalid bx--dropdown--up "
      data-invalid>
      <button  class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-a37w4i5rhyp-menu" aria-labelledby="example-a37w4i5rhyp-label example-a37w4i5rhyp-value" type="button">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__invalid-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.2 1 1 4.2 1 8s3.2 7 7 7 7-3.1 7-7-3.1-7-7-7zm-.5 3h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z"></path><path d="M7.5 4h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z" data-icon-path="inner-path" opacity="0"></path></svg>
        <span class="bx--dropdown-text__inner" id="example-a37w4i5rhyp-value"> Dropdown option </span>
        <span class="bx--dropdown__arrow-container">
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
        </span>
      </button>
      <ul class="bx--dropdown-list" id="example-a37w4i5rhyp-menu" role="menu" tabindex="0" id="example-a37w4i5rhyp-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-a37w4i5rhyp-label">
        <li data-option data-value="all" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-a37w4i5rhyp-item0">Option 1</a>
        </li>
        <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-a37w4i5rhyp-item1">Option 2</a>
        </li>
        <li data-option data-value="staging" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-a37w4i5rhyp-item2">Option 3</a>
        </li>
        <li data-option data-value="dea" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-a37w4i5rhyp-item3">Option 4</a>
        </li>
        <li data-option data-value="router" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-a37w4i5rhyp-item4">Option 5</a>
        </li>
        <li data-option data-value="loremipsum" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-a37w4i5rhyp-item5">An example option that is really long to show what should be done to handle long text</a>
        </li>
      </ul>
    </div>
    <div class="bx--form-requirement">
      This is not a validation message
    </div>
  </div>
</div>

Code:

<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->
<div class="bx--form-item">
  <div class="bx--dropdown__wrapper bx--dropdown__wrapper--inline">
    <span id="example-ly43i3n3f3k-label" class="bx--label">Dropdown label</span>
    <div data-dropdown data-dropdown-type="inline"  data-value
      class="bx--dropdown   bx--dropdown--inline">
      <button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-ly43i3n3f3k-menu" aria-labelledby="example-ly43i3n3f3k-label example-ly43i3n3f3k-value" type="button">
        <span class="bx--dropdown-text__inner" id="example-ly43i3n3f3k-value">Inline Dropdown label</span>
        <span class="bx--dropdown__arrow-container">
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
        </span>
      </button>
      <ul class="bx--dropdown-list" id="example-ly43i3n3f3k-menu" role="menu" tabindex="0" id="example-ly43i3n3f3k-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-ly43i3n3f3k-label">
        <li data-option data-value="all" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-ly43i3n3f3k-item0">Option 1</a>
        </li>
        <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ly43i3n3f3k-item1">Option 2</a>
        </li>
        <li data-option data-value="staging" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ly43i3n3f3k-item2">Option 3</a>
        </li>
        <li data-option data-value="dea" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ly43i3n3f3k-item3">Option 4</a>
        </li>
        <li data-option data-value="router" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ly43i3n3f3k-item4">Option 5</a>
        </li>
        <li data-option data-value="loremipsum" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-ly43i3n3f3k-item5">An example option that is really long to show what should be done to handle long text</a>
        </li>
      </ul>
    </div>
  </div>
</div>


<div class="bx--form-item">
  <div class="bx--dropdown__wrapper bx--dropdown__wrapper--inline">
    <span id="example-12cagncsq8k8-label" class="bx--label bx--label--disabled" aria-disabled="true">Dropdown label</span>
    <div data-dropdown data-dropdown-type="inline"  data-value
      class="bx--dropdown bx--dropdown--inline bx--dropdown--disabled">
      <button disabled class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-12cagncsq8k8-menu" aria-labelledby="example-12cagncsq8k8-label example-12cagncsq8k8-value" type="button">
        <span class="bx--dropdown-text__inner" id="example-12cagncsq8k8-value">Inline Dropdown label</span>
        <span class="bx--dropdown__arrow-container">
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
        </span>
      </button>
      <!-- Note: remove `tabindex` from disabled dropdown lists -->
      <ul class="bx--dropdown-list" id="example-12cagncsq8k8-menu" role="menu" id="example-12cagncsq8k8-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-12cagncsq8k8-label">
        <li data-option data-value="all" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-12cagncsq8k8-item0">Option 1</a>
        </li>
        <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-12cagncsq8k8-item1">Option 2</a>
        </li>
        <li data-option data-value="staging" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-12cagncsq8k8-item2">Option 3</a>
        </li>
        <li data-option data-value="dea" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-12cagncsq8k8-item3">Option 4</a>
        </li>
        <li data-option data-value="router" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-12cagncsq8k8-item4">Option 5</a>
        </li>
        <li data-option data-value="loremipsum" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-12cagncsq8k8-item5">An example option that is really long to show what should be done to handle long text</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="bx--form-item">
  <div class="bx--dropdown__wrapper bx--dropdown__wrapper--inline bx--dropdown__wrapper--inline--invalid">
    <span id="example-a37w4i5rhyp-label" class="bx--label">Dropdown label</span>
    <div data-dropdown data-dropdown-type="inline"  data-value
      class="bx--dropdown bx--dropdown--invalid   bx--dropdown--inline"
      data-invalid>
      <button  class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-a37w4i5rhyp-menu" aria-labelledby="example-a37w4i5rhyp-label example-a37w4i5rhyp-value" type="button">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__invalid-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.2 1 1 4.2 1 8s3.2 7 7 7 7-3.1 7-7-3.1-7-7-7zm-.5 3h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z"></path><path d="M7.5 4h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z" data-icon-path="inner-path" opacity="0"></path></svg>
        <span class="bx--dropdown-text__inner" id="example-a37w4i5rhyp-value">Inline Dropdown label</span>
        <span class="bx--dropdown__arrow-container">
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
        </span>
      </button>
      <ul class="bx--dropdown-list" id="example-a37w4i5rhyp-menu" role="menu" tabindex="0" id="example-a37w4i5rhyp-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-a37w4i5rhyp-label">
        <li data-option data-value="all" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-a37w4i5rhyp-item0">Option 1</a>
        </li>
        <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-a37w4i5rhyp-item1">Option 2</a>
        </li>
        <li data-option data-value="staging" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-a37w4i5rhyp-item2">Option 3</a>
        </li>
        <li data-option data-value="dea" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-a37w4i5rhyp-item3">Option 4</a>
        </li>
        <li data-option data-value="router" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-a37w4i5rhyp-item4">Option 5</a>
        </li>
        <li data-option data-value="loremipsum" class="bx--dropdown-item">
          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-a37w4i5rhyp-item5">An example option that is really long to show what should be done to handle long text</a>
        </li>
      </ul>
      <div class="bx--form-requirement">
        This is not a validation message
      </div>
    </div>
  </div>
</div>

Multi select

This component is currently only available in our React and Angular libraries.

View on React Storybook

Filterable multi select

This component is currently only available in our React and Angular libraries.

View on React Storybook (Check off Filterable in KNOBS tab)

Inline multi select

This component is currently only available in our React and Angular libraries.

View on React Storybook (Select inline in UI type in KNOBS tab)

Combo box

This component is currently only available in our React and Angular libraries.

View on React Storybook

Documentation

SCSS

Modifiers

Use these modifiers with .bx--dropdown class.

Name	Description
`.bx--dropdown--auto-width`	Allows the width of the dropdown to be equal to the width of the content inside it instead of being 100% width of the container.
`.bx--dropdown--selected`	Applies specific styles for a selected dropdown item.
`.bx--dropdown--open`	Applies specific styles when the dropdown is opened
`.bx--dropdown--up`	Applies style to have the dropdown slide up instead of down

JavaScript

Getting component class reference

ES2015

import { Dropdown } from 'carbon-components';

With pre-build bundle (`carbon-components.min.js`)

var Dropdown = CarbonComponents.Dropdown;

Instantiating

// `#my-dropdown` is an element with `[data-dropdown]` attribute
Dropdown.create(document.getElementById('my-dropdown'));

Public Methods

Name	Params	Description
`release`		Deletes the instance
`getCurrentNavigation`		Returns the currently highlighted element
`navigate`	direction: `Number`	Moves the focus up or down
`select`	itemToSelect: `Object`	Handles clicking on the dropdown options, doing the following: Changing text to selected option, removing selected option from options when selected, and emitting custom events
`setCloseOnBlur`		Sets an event handler to document for "close on blue" behavior

Example - Changing the active item

// `#my-dropdown` is an element with `[data-dropdown]` attribute
var dropdownInstance = Dropdown.create(document.getElementById('my-dropdown'));
// `#my-dropdown-link-1` is one of the `<a>`s with `bx--dropdown-link` class
dropdownInstance.select(document.getElementById('my-dropdown-link-1'));

Options

Option	Default Selector	Description
`selectorInit`	`[data-dropdown]`	The selector to find the dropdown component
`selectorItem`	`.bx--dropdown-link`	The selector to find the clickable area in the selected dropdown item
`selectorItemSelected`	`.bx--dropdown--selected`	The selector to find the clickable area in the selected dropdown item
`selectorItemHidden`	`[hidden],[aria-hidden="true"]`	The selector to find hidden dropdown items. Used to skip dropdown items for keyboard navigation.
`classSelected`	`bx--dropdown--selected`	The class for the selected dropdown item.

Events

Event Name	Description
`dropdown-beingselected`	Custom event fired before a dropdown item is selected
`dropdown-selected`	Custom event fired after a dropdown item is selected

document.addEventListener('dropdown-beingselected', function(evt) {
  if (!myApplication.shouldDropdownItemBeSelected(evt.target)) {
    evt.preventDefault();
  }
});

document.addEventListener('dropdown-selected', function(evt) {
  myAnalyticsLibrary.send({
    action: 'Dropdown item selected',
    id: evt.target.id,
  });
});

Edit this page on GitHub

Components: Date picker

Dropdown: Usage

Dropdown

Dropdown

Dropdown (Up)

Dropdown inline

Multi select

Filterable multi select

Inline multi select

Combo box

Documentation

SCSS

Modifiers

JavaScript

Getting component class reference

ES2015

With pre-build bundle (carbon-components.min.js)

Instantiating

Public Methods

Example - Changing the active item

Options

Events

Example - Preventing a dropdown item from being selected in a certain condition

Example - Notifying events of all dropdown items being selected to an analytics library

With pre-build bundle (`carbon-components.min.js`)