Dropdown

Select

Usage

<!-- dropdown (select) -->
<form class="ui-form">
  <div class="ui-form__group">
    <label>
      <div class="ui-form__label">...</div>
      <div class="ui-form__sublabel">...</div>

      <!-- dropdown component -->
      <div class="ui-form__dropdown-wrapper">

        <!-- the <select> will be hidden with CSS but its value can be updated with javascript -->
        <!-- this allows the form to be submitted with the chosen value -->
        <select>
          <option>...</option>
          <option value="1">...</option>
          <option value="2">...</option>
          <option value="3" disabled="">...</option>
        </select>

        <!-- the custom dropdown markup starts here -->

        <!-- the "ui-dropdown" element takes 2 modifier classes: -->
        <!-- "ui-dropdown--active"  ==>  expands the options list -->
        <!-- "ui-dropdown--selected"  ==>  collapses the options list and displays the selected options -->
        <div class="ui-dropdown">
          <button class="ui-dropdown__selection">
            <div class="ui-dropdown__placeholder">...</div>
            <div class="ui-dropdown__current">...</div>
          </button>

          <ul class="ui-dropdown__list">
            <li class="ui-dropdown__option">
              <button class="ui-dropdown__btn">...</button>
            </li>
            <li class="ui-dropdown__option">
              <button class="ui-dropdown__btn">...</button>
            </li>
            <li class="ui-dropdown__option ui-dropdown__option--disabled">
              <button class="ui-dropdown__btn">...</button>
            </li>
          </ul>
        </div>
      </div>
    </label>
  </div>
</form>