Allows the user to select a single item from a dropdown list of options.
Select
We use as a base Chosen changing its style with the characteristics of our design system.
To use Chosen you must include chosen.jquery.min.js in your page and initialize it using $('select').chosen()

A variable of the select is the possibility of using it without an internal search. You can initialize it using $('select.no-search').chosen({disable_search: true}) replacing 'search' class with 'no-search'.

To discover more variables or ways to set up your select check out Chosen page.
Select with search 
<div class="form-field vertical">
    <label>Label</label>
    <select class="search" name="" id="" data-placeholder="Select an option">
        <option value=""></option>
        <option value="">Option</option>
        <option value="">Option</option>
        <option value="">Option</option>
        <option value="">Option</option>
        <option value="">Option</option>
    </select>
</div>
Select without search 
<div class="form-field vertical">
    <label>Label</label>
    <select class="no-search" name="" id="" data-placeholder="Select an option">
        <option value=""></option>
        <option value="">Option</option>
        <option value="">Option</option>
        <option value="">Option</option>
        <option value="">Option</option>
        <option value="">Option</option>
    </select>
</div>
Multiple select 
<div class="form-field vertical">
    <label>Label</label>
    <select class="no-search" name="" id="" data-placeholder="Select an option" multiple>
        <option value=""></option>
        <option value="">Option 1</option>
        <option value="">Option 2</option>
        <option value="">Option 3</option>
        <option value="">Option 4</option>
        <option value="">Option 5</option>
    </select>
</div>
Datepickers
Datepickers are also considered Selects components and in most cases are used in Forms.

We use as a base jQuery UI and Timepicker changing it’s style with the characteristics of our design system.
jQuery UI requires jquery 3.6 and jquery-ui 1.12.

You must initialize it using $('input.date').datepicker({showOtherMonths: true}) and it also accepts options documented here. 
<div class="form-field vertical">
    <label>Select a date</label>
    <input type="text" class="date" placeholder="Date">
</div>
<div class="form-field vertical double">
    <label>Select the date</label>
    <div class="flex-h gap8">
        <div class="flex-v">
            <p class="form-field-description">From</p>
            <input type="text" class="date" placeholder="00/00/00">
        </div>
        <div class="flex-v">
            <p class="form-field-description">To</p>
            <input type="text" class="date" placeholder="00/00/00">
        </div>
    </div>
</div>
Timepicker requires jquery 3.6 and jquery timepicker 1.3.5.

You must initialize it using $('input.time').timepicker() and it also accepts options documented here. 
<div class="form-field vertical">
    <label>Select a time</label>
    <input type="text" class="time" placeholder="00:00">
</div>
<div class="form-field vertical double">
    <label>Select a time</label>
    <div class="flex-h gap8">
        <div class="flex-v">
            <p class="form-field-description">From</p>
            <input type="text" class="time" placeholder="00:00">
        </div>
        <div class="flex-v">
            <p class="form-field-description">To</p>
            <input type="text" class="time" placeholder="00:00">
        </div>
    </div>
</div>
General guidelines
  • Use one field per line.

  • A label should clearly and concisely describe the purpose of the field with no more than a few words.
Structure
1
Label: Provides clear information on what the user should select.
2
Placeholder: Provides additional information.
3
Icon: Indicates that there are options and can be displayed.
DO
  • Present many options where only one can be selected.
  • Avoid making long lists of options overwhelming.
  • Fit multiple options in a small space.
DON'T
  • When you only have a few options and enough space, use a radio.
  • When users can select more than one of several options, use a checkbox.