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="o-form">
  <div class="o-form__item">
    <div id="form_dropdown" class="o-form-dropdown">
      <label for="form_dropdown" class="o-form-dropdown__label">Label</label>
      <input id="form_dropdown" type="text" name="form_dropdown" class="o-form-dropdown__input" >
      <div class="o-form-dropdown__text">Placeholder</div>
      <div class="o-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="o-form-dropdown__content">
        <ul class="o-form-dropdown__menu">
          <li>Google</li>
          <li>Word</li>
          <li>Advertisement</li>
          <li>Competitor</li>
          <li>Other</li>
        </ul>
      </div>
    </div>
    <div class="o-form__description">Description of the dropdown field</div>
  </div>
</form>

Large

HTML

    <form class="o-form o-form--large">
  <div class="o-form__item">
    <div id="form_dropdown_large" class="o-form-dropdown">
      <label for="form_dropdown_large" class="o-form-dropdown__label">Label</label>
      <input id="form_dropdown_large" type="text" name="form_dropdown_large" class="o-form-dropdown__input">

      <div class="o-form-dropdown__text">Placeholder</div>
      <div class="o-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="o-form-dropdown__content">
        <ul class="o-form-dropdown__menu">
          <li>Google</li>
          <li>Word</li>
          <li>Advertisement</li>
          <li>Competitor</li>
          <li>Other</li>
        </ul>
      </div>
    </div>
    <div class="o-form__description">Description of the dropdown field</div>
  </div>
</form>

Search

HTML

    <form class="o-form o-form--large">
  <div class="o-form__item">
    <div class="o-form-dropdown o-form-dropdown--search">
      <label for="form_dropdown_search" class="o-form-dropdown__label">Label</label>
      <input id="form_dropdown_search" type="text" name="form_dropdown_search" class="o-form-dropdown__input" autocomplete="off">

      <div class="o-form-dropdown__text o-form-dropdown__search-text"></div>
      <div class="o-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="o-form-dropdown__content">
        <ul class="o-form-dropdown__menu">
          <li>Google</li>
          <li>Word</li>
          <li>Advertisement</li>
          <li>Competitor</li>
          <li>Other</li>
        </ul>
      </div>
    </div>
    <div class="o-form__description">Description of the dropdown field</div>
  </div>
</form>

Usage

Attribute	Description	Possible values	Type	Required	Default
size	Set with `.o-form--large` on `.o-form`	`large`	string	-	-
disabled	Set with `.is-disabled` on `.o-form-dropdown`	`disabled`	string	-	-
search	2 modifications required: Set with `.o-form-dropdown--search` on `.o-form-dropdown` Set with `.o-form-dropdown__search-text` on `.o-form-dropdown__text`	`search` and `search-text`	string	-	-