Dropdown

A dropdown field is used to elicit a response from a user, offering a list of options to choose from.

The Dropdown component comes with an optional Search mechanism, that enables users to quickly filter the available options by name.

Basic

Placeholder
  • Google
  • Word
  • Advertisement
  • Competitor
  • Other
Description of the dropdown field
HTML
    <form class="form">
  <div class="form__item">
    <div id="form_dropdown" class="form-dropdown">
      <label for="form_dropdown" class="form-dropdown__label">Label</label>
      <input id="form_dropdown" type="text" name="form_dropdown" class="form-dropdown__input" >
      <div class="form-dropdown__text">Placeholder</div>
      <div class="form-dropdown__icon">
        <svg viewBox="0 0 24 24">
          <path fill="#000000" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path>
        </svg>
        <svg viewBox="0 0 24 24">
          <path fill="#000000" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path>
        </svg>
      </div>
      <div class="form-dropdown__content">
        <ul class="form-dropdown__menu">
          <li>Google</li>
          <li>Word</li>
          <li>Advertisement</li>
          <li>Competitor</li>
          <li>Other</li>
        </ul>
      </div>
    </div>
    <div class="form__description">Description of the dropdown field</div>
  </div>
</form>
  

Large

Placeholder
  • Google
  • Word
  • Advertisement
  • Competitor
  • Other
Description of the dropdown field
HTML
    <form class="form form--large">
  <div class="form__item">
    <div id="form_dropdown_large" class="form-dropdown">
      <label for="form_dropdown_large" class="form-dropdown__label">Label</label>
      <input id="form_dropdown_large" type="text" name="form_dropdown_large" class="form-dropdown__input">

      <div class="form-dropdown__text">Placeholder</div>
      <div class="form-dropdown__icon">
        <svg viewBox="0 0 24 24">
          <path fill="#000000" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path>
        </svg>
        <svg viewBox="0 0 24 24">
          <path fill="#000000" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path>
        </svg>
      </div>
      <div class="form-dropdown__content">
        <ul class="form-dropdown__menu">
          <li>Google</li>
          <li>Word</li>
          <li>Advertisement</li>
          <li>Competitor</li>
          <li>Other</li>
        </ul>
      </div>
    </div>
    <div class="form__description">Description of the dropdown field</div>
  </div>
</form>
  

Usage

Attribute Description Possible values Type Required Default
size Set with .form--large on .form large string - -
disabled Set with .is-disabled on .form-dropdown disabled string - -