carbon-components/html/dropdown/dropdown.html

Carbon Components is a component library for IBM Cloud

<!--
  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">
    <label for="dropdown-id" class="bx--label">Dropdown label</label>
    <div class="bx--form__helper-text">Optional helper text.</div>
    <ul data-dropdown data-value id="dropdown-id"
      class="bx--dropdown   "
      tabindex="0">
      <li class="bx--dropdown-text">
         Dropdown option       </li>
      <li class="bx--dropdown__arrow-container">
        <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
          <path d="M10 0L5 5 0 0z"></path>
        </svg>
      </li>
      <li>
        <ul class="bx--dropdown-list">
          <li data-option data-value="all" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">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">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">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">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">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">An example option that is really long to show what should be done to handle long text</a>
          </li>
        </ul>
      </li>
    </ul>
</div>

<div class="bx--form-item">
    <label for="dropdown-id-longer-helper-text" class="bx--label">Dropdown label</label>
    <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>
    <ul data-dropdown data-value id="dropdown-id-longer-helper-text"
      class="bx--dropdown   "
      tabindex="0">
      <li class="bx--dropdown-text">
         Dropdown option       </li>
      <li class="bx--dropdown__arrow-container">
        <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
          <path d="M10 0L5 5 0 0z"></path>
        </svg>
      </li>
      <li>
        <ul class="bx--dropdown-list">
          <li data-option data-value="all" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">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">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">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">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">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">An example option that is really long to show what should be done to handle long text</a>
          </li>
        </ul>
      </li>
    </ul>
</div>

<div class="bx--form-item">
    <label for="dropdown-id-disabled" class="bx--label bx--label--disabled">Dropdown
      label</label>
    <div class="bx--form__helper-text bx--form__helper-text--disabled">Optional helper text
      here; if message is more than one line text
      should wrap (~100 character count maximum)</div>
    <ul data-dropdown data-value id="dropdown-id-disabled"
      class="bx--dropdown bx--dropdown--disabled"
      tabindex="0">
      <li class="bx--dropdown-text">
         Dropdown option       </li>
      <li class="bx--dropdown__arrow-container">
        <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
          <path d="M10 0L5 5 0 0z"></path>
        </svg>
      </li>
      <li>
        <ul class="bx--dropdown-list">
          <li data-option data-value="all" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">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">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">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">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">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">An example option that is really long to show what should be done to handle long text</a>
          </li>
        </ul>
      </li>
    </ul>
</div>

<div class="bx--form-item">
    <label for="dropdown-id-invalid" class="bx--label">Dropdown
      label</label>
    <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>
    <ul data-dropdown data-value id="dropdown-id-invalid"
      class="bx--dropdown bx--dropdown--invalid  "
      tabindex="0" data-invalid>
      <li class="bx--dropdown-text">
         Dropdown option       </li>
      <li class="bx--dropdown__arrow-container">
        <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
          <path d="M10 0L5 5 0 0z"></path>
        </svg>
      </li>
      <li>
        <ul class="bx--dropdown-list">
          <li data-option data-value="all" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">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">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">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">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">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">An example option that is really long to show what should be done to handle long text</a>
          </li>
        </ul>
      </li>
    </ul>
  <div class="bx--form-requirement">
    This is not a validation message
  </div>
</div>