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