Default (single select)
Since the searching through the data of a filterable dropdown can be implementen in many ways, we've decided only to provide the styling and no further functionality.
To show the filterable dropdown list, add the class ox-dropdown--open to the dropdown. You can do this when clicking on the element, or only after typing a few letters if you have an extensive search.
By default the height ofox-dropdown is set to 205px. If you need a deviating height for the list you can add the custom attribute data-list-size with a number between 1 and 10 (each step will show 4 visible items, so currently you can vary between 4 and 40 visible options.)
If the dropdown is shown at the bottom of the page, you can add the class ox-dropdown--above to open the dropdown above the field instead of beneath it.
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<div class="ox-form__group ox-form__group--has-dropdown">
<label for="random-name-2" class="ox-form__label">Username</label>
<input type="text" id="random-name-2" class="ox-form__field"/>
<ul class="ox-dropdown" data-list-size="2">
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="radio" name="customer" id="customer-ben" class="ox-form__checkbox__input" value="Ben Geller" />
<label for="customer-ben" class="ox-form__checkbox__label">Ben Geller</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="radio" name="customer" id="customer-carol" class="ox-form__checkbox__input" value="Carol Willick" />
<label for="customer-carol" class="ox-form__checkbox__label">Carol Willick</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="radio" name="customer" id="customer-chandler" class="ox-form__checkbox__input" value="Chandler Bing" />
<label for="customer-chandler" class="ox-form__checkbox__label">Chandler Bing</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="radio" name="customer" id="customer-jack" class="ox-form__checkbox__input" value="Jack Geller" />
<label for="customer-jack" class="ox-form__checkbox__label">Jack Geller</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="radio" name="customer" id="customer-janice" class="ox-form__checkbox__input" value="Janice Litman-Goralnick" />
<label for="customer-janice" class="ox-form__checkbox__label">Janice Litman-Goralnick</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="radio" name="customer" id="customer-joey" class="ox-form__checkbox__input" value="Joey Tribbiani" />
<label for="customer-joey" class="ox-form__checkbox__label">Joey Tribbiani</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="radio" name="customer" id="customer-judy" class="ox-form__checkbox__input" value="Judy Geller" />
<label for="customer-judy" class="ox-form__checkbox__label">Judy Geller</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="radio" name="customer" id="customer-monica" class="ox-form__checkbox__input" value="Monica Geller" />
<label for="customer-monica" class="ox-form__checkbox__label">Monica Geller</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="radio" name="customer" id="customer-phoebe" class="ox-form__checkbox__input" value="Phoebe Buffay" />
<label for="customer-phoebe" class="ox-form__checkbox__label">Phoebe Buffay</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="radio" name="customer" id="customer-rachel" class="ox-form__checkbox__input" value="Rachel Green" />
<label for="customer-rachel" class="ox-form__checkbox__label">Rachel Green</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="radio" name="customer" id="customer-ross" class="ox-form__checkbox__input" value="Ross Geller" />
<label for="customer-ross" class="ox-form__checkbox__label">Ross Geller</label>
</li>
</ul>
</div>
Multiselect (with taglist)
If you need to select multiple options, you can combine the taglist with the dropdown.
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<div class="ox-form__group ox-form__group--has-dropdown" aria-haspopup="true">
<label for="contact" class="ox-form__label">Contacts (in case of emergency)</label>
<div class="ox-form__taglist">
<button class="ox-form__taglist_tag ox-tag" title="Remove item: Ben Geller" aria-label="Remove item: Ben Geller">Ben Geller <span class="ox-tag__icon ox-icon ox-icon--close ox-icon--small"></span></button>
<button class="ox-form__taglist_tag ox-tag" title="Remove item: Jack Geller" aria-label="Remove item: Jack Geller">Jack Geller <span class="ox-tag__icon ox-icon ox-icon--close ox-icon--small"></span></button>
<button class="ox-form__taglist_tag ox-tag" title="Remove item: Monica Geller" aria-label="Remove item: Monica Geller">Monica Geller <span class="ox-tag__icon ox-icon ox-icon--close ox-icon--small"></span></button>
<input type="text" id="contact" class="ox-form__taglist__field" size="15" placeholder="Search contacts">
</div>
<ul class="ox-dropdown" data-list-size="2">
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="checkbox" name="customer" id="chk-customer-ben" class="ox-form__checkbox__input" value="Ben Geller" />
<label for="chk-customer-ben" class="ox-form__checkbox__label">Ben Geller</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="checkbox" name="customer" id="chk-customer-carol" class="ox-form__checkbox__input" value="Carol Willick" />
<label for="chk-customer-carol" class="ox-form__checkbox__label">Carol Willick</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="checkbox" name="customer" id="chk-customer-chandler" class="ox-form__checkbox__input" value="Chandler Bing" />
<label for="chk-customer-chandler" class="ox-form__checkbox__label">Chandler Bing</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="checkbox" name="customer" id="chk-customer-jack" class="ox-form__checkbox__input" value="Jack Geller" />
<label for="chk-customer-jack" class="ox-form__checkbox__label">Jack Geller</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="checkbox" name="customer" id="chk-customer-janice" class="ox-form__checkbox__input" value="Janice Litman-Goralnick" />
<label for="chk-customer-janice" class="ox-form__checkbox__label">Janice Litman-Goralnick</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="checkbox" name="customer" id="chk-customer-joey" class="ox-form__checkbox__input" value="Joey Tribbiani" />
<label for="chk-customer-joey" class="ox-form__checkbox__label">Joey Tribbiani</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="checkbox" name="customer" id="chk-customer-judy" class="ox-form__checkbox__input" value="Judy Geller" />
<label for="chk-customer-judy" class="ox-form__checkbox__label">Judy Geller</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="checkbox" name="customer" id="chk-customer-monica" class="ox-form__checkbox__input" value="Monica Geller" />
<label for="chk-customer-monica" class="ox-form__checkbox__label">Monica Geller</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="checkbox" name="customer" id="chk-customer-phoebe" class="ox-form__checkbox__input" value="Phoebe Buffay" />
<label for="chk-customer-phoebe" class="ox-form__checkbox__label">Phoebe Buffay</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="checkbox" name="customer" id="chk-customer-rachel" class="ox-form__checkbox__input" value="Rachel Green" />
<label for="chk-customer-rachel" class="ox-form__checkbox__label">Rachel Green</label>
</li>
<li class="ox-form__checkbox ox-form__checkbox--ghost">
<input type="checkbox" name="customer" id="chk-customer-ross" class="ox-form__checkbox__input" value="Ross Geller" />
<label for="chk-customer-ross" class="ox-form__checkbox__label">Ross Geller</label>
</li>
</ul>
</div>