Usage
Use .combobox when the user needs to search or filter a known list before choosing a value. Keep the text input focusable, give it role="combobox", connect it to the popup with aria-controls, and expose the suggestion list as a listbox so keyboard and screen reader users can follow the active option.
Use a visible label or clear accessible name, keep option values unique, and submit the selected value through normal form fields. For long lists, group options only when the grouping helps scanning; for multiple selection, keep selected chips short and make removal controls reachable from the keyboard.
Combobox uses Bootstrap form-control and dropdown-menu surfaces, while the optional Moo UI runtime owns filtering, active-option movement, and selected-value synchronization. Load that runtime only on pages that need enhanced list behavior, and provide a native select or server-side fallback when JavaScript is unavailable.
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
56
57
58
59
60
61
62
63<div class="field w-100">
<div class="combobox" data-combobox-selected="false">
<div class="combobox-control">
<input class="form-control combobox-input" id="combobox-reviewer-input" type="text" role="combobox" autocomplete="off" aria-expanded="false" aria-controls="combobox-reviewer-listbox" aria-autocomplete="list" data-combobox-selected="false" aria-label="Select reviewer" placeholder="Select a reviewer">
<input type="hidden" name="reviewer" value="">
<span class="combobox-indicator" aria-hidden="true">
<i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
</span>
<ul class="dropdown-menu combobox-menu" id="combobox-reviewer-listbox" role="listbox">
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-reviewer-option-1" type="button" role="option" data-value="ada" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Ada Lovelace</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-reviewer-option-2" type="button" role="option" data-value="grace" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Grace Hopper</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-reviewer-option-3" type="button" role="option" data-value="katherine" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Katherine Johnson</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-reviewer-option-4" type="button" role="option" data-value="margaret" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Margaret Hamilton</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-reviewer-option-5" type="button" role="option" data-value="dorothy" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Dorothy Vaughan</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
</ul>
</div>
</div>
</div>
Choose every area this review should cover.
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91<div class="field w-100">
<div class="combobox combobox--multiple" data-combobox-selected="true" data-combobox-multiple="true">
<label class="form-label" for="combobox-review-areas-input">Review areas</label>
<div class="combobox-control">
<div class="form-control combobox-chips">
<span class="combobox-value">
<span class="badge text-bg-secondary combobox-chip" data-value="security">
<span class="combobox-chip__label">Security</span>
<button class="combobox-chip__remove" type="button" aria-label="Remove Security" data-value="security" data-combobox-chip-remove="true">
<i class="lucide lucide-x" data-icon="inline-end" aria-hidden="true"></i>
</button>
</span>
<span class="badge text-bg-secondary combobox-chip" data-value="billing">
<span class="combobox-chip__label">Billing</span>
<button class="combobox-chip__remove" type="button" aria-label="Remove Billing" data-value="billing" data-combobox-chip-remove="true">
<i class="lucide lucide-x" data-icon="inline-end" aria-hidden="true"></i>
</button>
</span>
<span class="badge text-bg-secondary combobox-chip" data-value="ops">
<span class="combobox-chip__label">Operations</span>
<button class="combobox-chip__remove" type="button" aria-label="Remove Operations" data-value="ops" data-combobox-chip-remove="true">
<i class="lucide lucide-x" data-icon="inline-end" aria-hidden="true"></i>
</button>
</span>
</span>
<input class="combobox-chips-input combobox-input" id="combobox-review-areas-input" type="text" role="combobox" autocomplete="off" aria-expanded="false" aria-controls="combobox-review-areas-listbox" aria-autocomplete="list" aria-describedby="combobox-review-areas-help">
<span data-combobox-value-store="true" data-combobox-name="review_areas">
<input type="hidden" name="review_areas" value="security">
<input type="hidden" name="review_areas" value="billing">
<input type="hidden" name="review_areas" value="ops">
</span>
<template data-combobox-chip-icon>
<i class="lucide lucide-x" data-icon="inline-end" aria-hidden="true"></i>
</template>
</div>
<ul class="dropdown-menu combobox-menu" id="combobox-review-areas-listbox" role="listbox" aria-multiselectable="true">
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-review-areas-option-1" type="button" role="option" data-value="security" aria-selected="true">
<span class="combobox-option__content">
<span class="combobox-option__label">Security</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-review-areas-option-2" type="button" role="option" data-value="billing" aria-selected="true">
<span class="combobox-option__content">
<span class="combobox-option__label">Billing</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-review-areas-option-3" type="button" role="option" data-value="ops" aria-selected="true">
<span class="combobox-option__content">
<span class="combobox-option__label">Operations</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-review-areas-option-4" type="button" role="option" data-value="support" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Support</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-review-areas-option-5" type="button" role="option" data-value="compliance" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Compliance</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
</ul>
</div>
</div>
<div class="field-description form-text" id="combobox-review-areas-help">Choose every area this review should cover.</div>
</div>
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
56
57
58
59
60
61
62
63
64
65
66<div class="field w-100">
<div class="combobox combobox--clearable" data-combobox-selected="true">
<div class="combobox-control">
<input class="form-control combobox-input" id="combobox-clear-reviewer-input" type="text" role="combobox" autocomplete="off" aria-expanded="false" aria-controls="combobox-clear-reviewer-listbox" aria-autocomplete="list" data-combobox-selected="true" aria-label="Reviewer with clear button" placeholder="Select a reviewer" value="Ada Lovelace">
<input type="hidden" name="clear_reviewer" value="ada">
<button type="button" class="combobox-clear" aria-label="Clear selection" data-combobox-clear="true">
<i class="lucide lucide-x" data-icon="inline-end" aria-hidden="true"></i>
</button>
<span class="combobox-indicator" aria-hidden="true" hidden>
<i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
</span>
<ul class="dropdown-menu combobox-menu" id="combobox-clear-reviewer-listbox" role="listbox">
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-clear-reviewer-option-1" type="button" role="option" data-value="ada" aria-selected="true">
<span class="combobox-option__content">
<span class="combobox-option__label">Ada Lovelace</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-clear-reviewer-option-2" type="button" role="option" data-value="grace" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Grace Hopper</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-clear-reviewer-option-3" type="button" role="option" data-value="katherine" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Katherine Johnson</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-clear-reviewer-option-4" type="button" role="option" data-value="margaret" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Margaret Hamilton</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-clear-reviewer-option-5" type="button" role="option" data-value="dorothy" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Dorothy Vaughan</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
</ul>
</div>
</div>
</div>
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214<div class="field w-100">
<div class="combobox" data-combobox-selected="false">
<div class="combobox-control">
<input class="form-control combobox-input" id="combobox-timezone-input" type="text" role="combobox" autocomplete="off" aria-expanded="false" aria-controls="combobox-timezone-listbox" aria-autocomplete="list" data-combobox-selected="false" aria-label="Timezone" placeholder="Select a timezone">
<input type="hidden" name="timezone" value="">
<span class="combobox-indicator" aria-hidden="true">
<i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
</span>
<ul class="dropdown-menu combobox-menu" id="combobox-timezone-listbox" role="listbox">
<li role="group" aria-labelledby="combobox-timezone-group-1" class="combobox-group" data-combobox-group>
<div class="dropdown-header combobox-group-label" id="combobox-timezone-group-1">Americas</div>
<ul class="list-unstyled mb-0" role="presentation">
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-timezone-option-1" type="button" role="option" data-value="new-york" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">(GMT-5) New York</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-timezone-option-2" type="button" role="option" data-value="los-angeles" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">(GMT-8) Los Angeles</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-timezone-option-3" type="button" role="option" data-value="chicago" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">(GMT-6) Chicago</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-timezone-option-4" type="button" role="option" data-value="toronto" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">(GMT-5) Toronto</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-timezone-option-5" type="button" role="option" data-value="vancouver" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">(GMT-8) Vancouver</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-timezone-option-6" type="button" role="option" data-value="sao-paulo" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">(GMT-3) São Paulo</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
</ul>
</li>
<li role="presentation" aria-hidden="true" data-combobox-separator>
<hr class="dropdown-divider combobox-separator">
</li>
<li role="group" aria-labelledby="combobox-timezone-group-2" class="combobox-group" data-combobox-group>
<div class="dropdown-header combobox-group-label" id="combobox-timezone-group-2">Europe</div>
<ul class="list-unstyled mb-0" role="presentation">
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-timezone-option-7" type="button" role="option" data-value="london" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">(GMT+0) London</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-timezone-option-8" type="button" role="option" data-value="paris" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">(GMT+1) Paris</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-timezone-option-9" type="button" role="option" data-value="berlin" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">(GMT+1) Berlin</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-timezone-option-10" type="button" role="option" data-value="rome" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">(GMT+1) Rome</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-timezone-option-11" type="button" role="option" data-value="madrid" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">(GMT+1) Madrid</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-timezone-option-12" type="button" role="option" data-value="amsterdam" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">(GMT+1) Amsterdam</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
</ul>
</li>
<li role="presentation" aria-hidden="true" data-combobox-separator>
<hr class="dropdown-divider combobox-separator">
</li>
<li role="group" aria-labelledby="combobox-timezone-group-3" class="combobox-group" data-combobox-group>
<div class="dropdown-header combobox-group-label" id="combobox-timezone-group-3">Asia/Pacific</div>
<ul class="list-unstyled mb-0" role="presentation">
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-timezone-option-13" type="button" role="option" data-value="tokyo" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">(GMT+9) Tokyo</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-timezone-option-14" type="button" role="option" data-value="shanghai" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">(GMT+8) Shanghai</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-timezone-option-15" type="button" role="option" data-value="singapore" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">(GMT+8) Singapore</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-timezone-option-16" type="button" role="option" data-value="dubai" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">(GMT+4) Dubai</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-timezone-option-17" type="button" role="option" data-value="sydney" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">(GMT+11) Sydney</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-timezone-option-18" type="button" role="option" data-value="seoul" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">(GMT+9) Seoul</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
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
56
57<div class="field w-100">
<div class="combobox combobox--custom-items" data-combobox-selected="false">
<div class="combobox-control">
<input class="form-control combobox-input" id="combobox-request-type-input" type="text" role="combobox" autocomplete="off" aria-expanded="false" aria-controls="combobox-request-type-listbox" aria-autocomplete="list" data-combobox-selected="false" aria-label="Request type" placeholder="Search request types...">
<input type="hidden" name="request_type" value="">
<span class="combobox-indicator" aria-hidden="true">
<i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
</span>
<ul class="dropdown-menu combobox-menu" id="combobox-request-type-listbox" role="listbox">
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-request-type-option-1" type="button" role="option" data-value="sla-risk" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">SLA risk</span>
<span class="combobox-option__description">Support queue</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-request-type-option-2" type="button" role="option" data-value="plan-change" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Plan change</span>
<span class="combobox-option__description">Billing workflow</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-request-type-option-3" type="button" role="option" data-value="portal-bug" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Portal bug</span>
<span class="combobox-option__description">Customer portal</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-request-type-option-4" type="button" role="option" data-value="data-export" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Data export</span>
<span class="combobox-option__description">Compliance request</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
</ul>
</div>
</div>
</div>
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
56
57
58
59
60
61
62
63<div class="field w-100" data-invalid="true">
<div class="combobox" data-combobox-selected="false">
<div class="combobox-control">
<input class="form-control combobox-input is-invalid" id="combobox-invalid-reviewer-input" type="text" role="combobox" autocomplete="off" aria-expanded="false" aria-controls="combobox-invalid-reviewer-listbox" aria-autocomplete="list" data-combobox-selected="false" aria-label="Invalid reviewer" placeholder="Select a reviewer" aria-invalid="true">
<input type="hidden" name="invalid_reviewer" value="">
<span class="combobox-indicator" aria-hidden="true">
<i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
</span>
<ul class="dropdown-menu combobox-menu" id="combobox-invalid-reviewer-listbox" role="listbox">
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-invalid-reviewer-option-1" type="button" role="option" data-value="ada" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Ada Lovelace</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-invalid-reviewer-option-2" type="button" role="option" data-value="grace" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Grace Hopper</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-invalid-reviewer-option-3" type="button" role="option" data-value="katherine" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Katherine Johnson</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-invalid-reviewer-option-4" type="button" role="option" data-value="margaret" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Margaret Hamilton</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-invalid-reviewer-option-5" type="button" role="option" data-value="dorothy" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Dorothy Vaughan</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
</ul>
</div>
</div>
</div>
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
56
57
58
59
60
61
62
63<div class="field w-100">
<div class="combobox" data-combobox-selected="false">
<div class="combobox-control">
<input class="form-control combobox-input" id="combobox-disabled-reviewer-input" type="text" role="combobox" autocomplete="off" aria-expanded="false" aria-controls="combobox-disabled-reviewer-listbox" aria-autocomplete="list" data-combobox-selected="false" aria-label="Disabled reviewer" placeholder="Select a reviewer" disabled>
<input type="hidden" name="disabled_reviewer" value="">
<span class="combobox-indicator" aria-hidden="true">
<i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
</span>
<ul class="dropdown-menu combobox-menu" id="combobox-disabled-reviewer-listbox" role="listbox">
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-disabled-reviewer-option-1" type="button" role="option" data-value="ada" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Ada Lovelace</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-disabled-reviewer-option-2" type="button" role="option" data-value="grace" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Grace Hopper</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-disabled-reviewer-option-3" type="button" role="option" data-value="katherine" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Katherine Johnson</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-disabled-reviewer-option-4" type="button" role="option" data-value="margaret" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Margaret Hamilton</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="dropdown-item combobox-option" id="combobox-disabled-reviewer-option-5" type="button" role="option" data-value="dorothy" aria-selected="false">
<span class="combobox-option__content">
<span class="combobox-option__label">Dorothy Vaughan</span>
</span>
<span class="combobox-option__check" aria-hidden="true">
<i class="lucide lucide-check" data-icon="inline-end" aria-hidden="true"></i>
</span>
</button>
</li>
</ul>
</div>
</div>
</div>
JavaScript
Bootstrap 5.3 does not provide a Combobox plugin. Moo UI therefore owns the
filtering, single and multiple selection, keyboard navigation, hidden value,
and ARIA state behavior for this component only. It does not replace any
Bootstrap plugin.
Importing the optional module has no document-wide side effect. Initialize
only a Combobox root your application owns; repeated initialization returns
the same instance, and dispose() removes its listeners and
generated runtime nodes.
1
2
3
4
5
6
7
8
9
10import Combobox from "@wpmoo/ui/combobox.js";
const element = document.querySelector(".combobox");
if (element) {
const combobox = Combobox.getOrCreateInstance(element);
combobox.dispose();
}
Component reference
- Status
- Accepted
- Runtime
- optional Moo UI ESM
- Markup
- Moo UI documented extension
- Reference
-
Combobox starts from Bootstrap's native form-control and dropdown menu contracts. For the underlying menu behavior, see the
Bootstrap Dropdown documentation.