Get Orange

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

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

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	-	-