@patternfly/patternfly 6.0.0-alpha.169 → 6.0.0-alpha.170
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Card/card.css +3 -3
- package/components/Card/card.scss +3 -3
- package/components/_index.css +3 -3
- package/docs/components/InputGroup/examples/InputGroup.md +11 -53
- package/docs/components/Login/examples/Login.md +11 -42
- package/docs/demos/Card/examples/Card.md +64 -324
- package/docs/demos/CardView/examples/CardView.md +11 -103
- package/docs/demos/Dashboard/examples/Dashboard.md +22 -128
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +105 -794
- package/docs/demos/Table/examples/Table.md +141 -1320
- package/docs/demos/Tabs/examples/Tabs.md +11 -103
- package/package.json +1 -1
- package/patternfly-no-globals.css +3 -3
- package/patternfly.css +3 -3
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
- package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
- package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
- package/docs/components/ContextSelector/deprecated/context-selector.md +0 -907
- package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
- package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
- package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
- package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
- package/docs/components/Select/deprecated/Select.css +0 -56
- package/docs/components/Select/deprecated/Select.md +0 -3609
- package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1781
|
@@ -1,3609 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
id: Select
|
|
3
|
-
section: components
|
|
4
|
-
subsection: menus
|
|
5
|
-
cssPrefix: pf-v6-c-select
|
|
6
|
-
deprecated: true
|
|
7
|
-
---import './Select.css'
|
|
8
|
-
|
|
9
|
-
## Single
|
|
10
|
-
|
|
11
|
-
### Single select
|
|
12
|
-
|
|
13
|
-
```html
|
|
14
|
-
<div class="pf-v6-c-select">
|
|
15
|
-
<span id="select-single-label" hidden>Choose one</span>
|
|
16
|
-
|
|
17
|
-
<button
|
|
18
|
-
class="pf-v6-c-select__toggle"
|
|
19
|
-
type="button"
|
|
20
|
-
id="select-single-toggle"
|
|
21
|
-
aria-haspopup="true"
|
|
22
|
-
aria-expanded="false"
|
|
23
|
-
aria-labelledby="select-single-label select-single-toggle"
|
|
24
|
-
>
|
|
25
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
26
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
27
|
-
</div>
|
|
28
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
29
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
30
|
-
</span>
|
|
31
|
-
</button>
|
|
32
|
-
|
|
33
|
-
<ul
|
|
34
|
-
class="pf-v6-c-select__menu"
|
|
35
|
-
role="listbox"
|
|
36
|
-
aria-labelledby="select-single-label"
|
|
37
|
-
hidden
|
|
38
|
-
>
|
|
39
|
-
<li role="presentation">
|
|
40
|
-
<button class="pf-v6-c-select__menu-item" role="option">Running</button>
|
|
41
|
-
</li>
|
|
42
|
-
<li role="presentation">
|
|
43
|
-
<button
|
|
44
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
45
|
-
role="option"
|
|
46
|
-
aria-selected="true"
|
|
47
|
-
>
|
|
48
|
-
Stopped
|
|
49
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
50
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
51
|
-
</span>
|
|
52
|
-
</button>
|
|
53
|
-
</li>
|
|
54
|
-
<li role="presentation">
|
|
55
|
-
<button class="pf-v6-c-select__menu-item" role="option">Down</button>
|
|
56
|
-
</li>
|
|
57
|
-
<li role="presentation">
|
|
58
|
-
<button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
|
|
59
|
-
</li>
|
|
60
|
-
<li role="presentation">
|
|
61
|
-
<button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
|
|
62
|
-
</li>
|
|
63
|
-
</ul>
|
|
64
|
-
</div>
|
|
65
|
-
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
### Single expanded
|
|
69
|
-
|
|
70
|
-
```html
|
|
71
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
72
|
-
<span id="select-single-expanded-label" hidden>Choose one</span>
|
|
73
|
-
|
|
74
|
-
<button
|
|
75
|
-
class="pf-v6-c-select__toggle"
|
|
76
|
-
type="button"
|
|
77
|
-
id="select-single-expanded-toggle"
|
|
78
|
-
aria-haspopup="true"
|
|
79
|
-
aria-expanded="true"
|
|
80
|
-
aria-labelledby="select-single-expanded-label select-single-expanded-toggle"
|
|
81
|
-
>
|
|
82
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
83
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
84
|
-
</div>
|
|
85
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
86
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
87
|
-
</span>
|
|
88
|
-
</button>
|
|
89
|
-
|
|
90
|
-
<ul
|
|
91
|
-
class="pf-v6-c-select__menu"
|
|
92
|
-
role="listbox"
|
|
93
|
-
aria-labelledby="select-single-expanded-label"
|
|
94
|
-
>
|
|
95
|
-
<li role="presentation">
|
|
96
|
-
<button class="pf-v6-c-select__menu-item" role="option">Running</button>
|
|
97
|
-
</li>
|
|
98
|
-
<li role="presentation">
|
|
99
|
-
<button
|
|
100
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
101
|
-
role="option"
|
|
102
|
-
aria-selected="true"
|
|
103
|
-
>
|
|
104
|
-
Stopped
|
|
105
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
106
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
107
|
-
</span>
|
|
108
|
-
</button>
|
|
109
|
-
</li>
|
|
110
|
-
<li role="presentation">
|
|
111
|
-
<button class="pf-v6-c-select__menu-item" role="option">Down</button>
|
|
112
|
-
</li>
|
|
113
|
-
<li role="presentation">
|
|
114
|
-
<button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
|
|
115
|
-
</li>
|
|
116
|
-
<li role="presentation">
|
|
117
|
-
<button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
|
|
118
|
-
</li>
|
|
119
|
-
</ul>
|
|
120
|
-
</div>
|
|
121
|
-
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
### Single with top expanded
|
|
125
|
-
|
|
126
|
-
```html
|
|
127
|
-
<div class="pf-v6-c-select pf-m-expanded pf-m-top">
|
|
128
|
-
<span id="select-single-top-expanded-label" hidden>Choose one</span>
|
|
129
|
-
|
|
130
|
-
<button
|
|
131
|
-
class="pf-v6-c-select__toggle"
|
|
132
|
-
type="button"
|
|
133
|
-
id="select-single-top-expanded-toggle"
|
|
134
|
-
aria-haspopup="true"
|
|
135
|
-
aria-expanded="true"
|
|
136
|
-
aria-labelledby="select-single-top-expanded-label select-single-top-expanded-toggle"
|
|
137
|
-
>
|
|
138
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
139
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
140
|
-
</div>
|
|
141
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
142
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
143
|
-
</span>
|
|
144
|
-
</button>
|
|
145
|
-
|
|
146
|
-
<ul
|
|
147
|
-
class="pf-v6-c-select__menu"
|
|
148
|
-
role="listbox"
|
|
149
|
-
aria-labelledby="select-single-top-expanded-label"
|
|
150
|
-
>
|
|
151
|
-
<li role="presentation">
|
|
152
|
-
<button class="pf-v6-c-select__menu-item" role="option">Running</button>
|
|
153
|
-
</li>
|
|
154
|
-
<li role="presentation">
|
|
155
|
-
<button
|
|
156
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
157
|
-
role="option"
|
|
158
|
-
aria-selected="true"
|
|
159
|
-
>
|
|
160
|
-
Stopped
|
|
161
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
162
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
163
|
-
</span>
|
|
164
|
-
</button>
|
|
165
|
-
</li>
|
|
166
|
-
<li role="presentation">
|
|
167
|
-
<button class="pf-v6-c-select__menu-item" role="option">Down</button>
|
|
168
|
-
</li>
|
|
169
|
-
<li role="presentation">
|
|
170
|
-
<button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
|
|
171
|
-
</li>
|
|
172
|
-
<li role="presentation">
|
|
173
|
-
<button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
|
|
174
|
-
</li>
|
|
175
|
-
</ul>
|
|
176
|
-
</div>
|
|
177
|
-
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
### Single expanded and selected
|
|
181
|
-
|
|
182
|
-
```html
|
|
183
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
184
|
-
<span id="select-single-expanded-selected-label" hidden>Choose one</span>
|
|
185
|
-
|
|
186
|
-
<button
|
|
187
|
-
class="pf-v6-c-select__toggle"
|
|
188
|
-
type="button"
|
|
189
|
-
id="select-single-expanded-selected-toggle"
|
|
190
|
-
aria-haspopup="true"
|
|
191
|
-
aria-expanded="true"
|
|
192
|
-
aria-labelledby="select-single-expanded-selected-label select-single-expanded-selected-toggle"
|
|
193
|
-
>
|
|
194
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
195
|
-
<span class="pf-v6-c-select__toggle-text">April</span>
|
|
196
|
-
</div>
|
|
197
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
198
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
199
|
-
</span>
|
|
200
|
-
</button>
|
|
201
|
-
|
|
202
|
-
<ul
|
|
203
|
-
class="pf-v6-c-select__menu"
|
|
204
|
-
role="listbox"
|
|
205
|
-
aria-labelledby="select-single-expanded-selected-label"
|
|
206
|
-
>
|
|
207
|
-
<li role="presentation">
|
|
208
|
-
<button class="pf-v6-c-select__menu-item" role="option">Running</button>
|
|
209
|
-
</li>
|
|
210
|
-
<li role="presentation">
|
|
211
|
-
<button
|
|
212
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
213
|
-
role="option"
|
|
214
|
-
aria-selected="true"
|
|
215
|
-
>
|
|
216
|
-
Stopped
|
|
217
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
218
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
219
|
-
</span>
|
|
220
|
-
</button>
|
|
221
|
-
</li>
|
|
222
|
-
<li role="presentation">
|
|
223
|
-
<button class="pf-v6-c-select__menu-item" role="option">Down</button>
|
|
224
|
-
</li>
|
|
225
|
-
<li role="presentation">
|
|
226
|
-
<button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
|
|
227
|
-
</li>
|
|
228
|
-
<li role="presentation">
|
|
229
|
-
<button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
|
|
230
|
-
</li>
|
|
231
|
-
</ul>
|
|
232
|
-
</div>
|
|
233
|
-
|
|
234
|
-
```
|
|
235
|
-
|
|
236
|
-
The single select should be used when the user is selecting an option from a list of items. Although the presentation is similar to the basic dropdown, the underlying HTML and ARIA tag structure is specific to a select list. The selection will replace the default text in the toggle. The selection is highlighted with the list is opened. If the selection is cleared elsewhere (i.e. from the filter bar), the default text is restored.
|
|
237
|
-
|
|
238
|
-
### Usage
|
|
239
|
-
|
|
240
|
-
| Class | Applied to | Outcome |
|
|
241
|
-
| -- | -- | -- |
|
|
242
|
-
| `.pf-v6-c-select` | `<div>` | Initiates a custom select. |
|
|
243
|
-
| `.pf-v6-c-select__toggle` | `<button>` | Initiates a custom toggle. |
|
|
244
|
-
| `.pf-v6-c-select__toggle-wrapper` | `<div>` | Initiates a custom select toggle wrapper. |
|
|
245
|
-
| `.pf-v6-c-select__toggle-arrow` | `<span>` | Initiates the caret to toggle the dropdown. |
|
|
246
|
-
| `.pf-v6-c-select__menu` | `<ul>` | Initiates the custom select dropdown menu. |
|
|
247
|
-
| `.pf-v6-c-select__menu-item` | `<li>` | Initiates the items in the custom select dropdown menu. |
|
|
248
|
-
| `.pf-v6-c-select__menu-item-icon` | `<i>` | Initiates the selected item icon. |
|
|
249
|
-
| `.pf-m-top` | `.pf-v6-c-select` | Modifies the select menu to display above the toggle. |
|
|
250
|
-
| `.pf-m-align-right` | `.pf-v6-c-select__menu` | Modifies the select menu to display right aligned to the toggle. |
|
|
251
|
-
| `.pf-m-static` | `.pf-v6-c-select__menu` | Modifies the select menu to be statically positioned to support custom positioning. |
|
|
252
|
-
| `.pf-m-active` | `.pf-v6-c-select` | Forces display of the active state of the toggle. |
|
|
253
|
-
|
|
254
|
-
## States
|
|
255
|
-
|
|
256
|
-
### Disabled
|
|
257
|
-
|
|
258
|
-
```html
|
|
259
|
-
<div class="pf-v6-c-select">
|
|
260
|
-
<span id="select-disabled-label" hidden>Choose one</span>
|
|
261
|
-
|
|
262
|
-
<button
|
|
263
|
-
class="pf-v6-c-select__toggle"
|
|
264
|
-
type="button"
|
|
265
|
-
id="select-disabled-toggle"
|
|
266
|
-
aria-haspopup="true"
|
|
267
|
-
aria-expanded="false"
|
|
268
|
-
aria-labelledby="select-disabled-label select-disabled-toggle"
|
|
269
|
-
disabled
|
|
270
|
-
>
|
|
271
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
272
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
273
|
-
</div>
|
|
274
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
275
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
276
|
-
</span>
|
|
277
|
-
</button>
|
|
278
|
-
|
|
279
|
-
<ul
|
|
280
|
-
class="pf-v6-c-select__menu"
|
|
281
|
-
role="listbox"
|
|
282
|
-
aria-labelledby="select-disabled-label"
|
|
283
|
-
hidden
|
|
284
|
-
>
|
|
285
|
-
<li role="presentation">
|
|
286
|
-
<button class="pf-v6-c-select__menu-item" role="option">Running</button>
|
|
287
|
-
</li>
|
|
288
|
-
<li role="presentation">
|
|
289
|
-
<button
|
|
290
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
291
|
-
role="option"
|
|
292
|
-
aria-selected="true"
|
|
293
|
-
>
|
|
294
|
-
Stopped
|
|
295
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
296
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
297
|
-
</span>
|
|
298
|
-
</button>
|
|
299
|
-
</li>
|
|
300
|
-
<li role="presentation">
|
|
301
|
-
<button class="pf-v6-c-select__menu-item" role="option">Down</button>
|
|
302
|
-
</li>
|
|
303
|
-
<li role="presentation">
|
|
304
|
-
<button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
|
|
305
|
-
</li>
|
|
306
|
-
<li role="presentation">
|
|
307
|
-
<button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
|
|
308
|
-
</li>
|
|
309
|
-
</ul>
|
|
310
|
-
</div>
|
|
311
|
-
|
|
312
|
-
```
|
|
313
|
-
|
|
314
|
-
### Success
|
|
315
|
-
|
|
316
|
-
```html
|
|
317
|
-
<div class="pf-v6-c-select pf-m-success">
|
|
318
|
-
<span id="select-success-label" hidden>Choose one</span>
|
|
319
|
-
|
|
320
|
-
<button
|
|
321
|
-
class="pf-v6-c-select__toggle"
|
|
322
|
-
type="button"
|
|
323
|
-
id="select-success-toggle"
|
|
324
|
-
aria-haspopup="true"
|
|
325
|
-
aria-expanded="false"
|
|
326
|
-
aria-labelledby="select-success-label select-success-toggle"
|
|
327
|
-
>
|
|
328
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
329
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
330
|
-
</div>
|
|
331
|
-
<span class="pf-v6-c-select__toggle-status-icon">
|
|
332
|
-
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
333
|
-
</span>
|
|
334
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
335
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
336
|
-
</span>
|
|
337
|
-
</button>
|
|
338
|
-
|
|
339
|
-
<ul
|
|
340
|
-
class="pf-v6-c-select__menu"
|
|
341
|
-
role="listbox"
|
|
342
|
-
aria-labelledby="select-success-label"
|
|
343
|
-
hidden
|
|
344
|
-
>
|
|
345
|
-
<li role="presentation">
|
|
346
|
-
<button class="pf-v6-c-select__menu-item" role="option">Running</button>
|
|
347
|
-
</li>
|
|
348
|
-
<li role="presentation">
|
|
349
|
-
<button
|
|
350
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
351
|
-
role="option"
|
|
352
|
-
aria-selected="true"
|
|
353
|
-
>
|
|
354
|
-
Stopped
|
|
355
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
356
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
357
|
-
</span>
|
|
358
|
-
</button>
|
|
359
|
-
</li>
|
|
360
|
-
<li role="presentation">
|
|
361
|
-
<button class="pf-v6-c-select__menu-item" role="option">Down</button>
|
|
362
|
-
</li>
|
|
363
|
-
<li role="presentation">
|
|
364
|
-
<button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
|
|
365
|
-
</li>
|
|
366
|
-
<li role="presentation">
|
|
367
|
-
<button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
|
|
368
|
-
</li>
|
|
369
|
-
</ul>
|
|
370
|
-
</div>
|
|
371
|
-
|
|
372
|
-
```
|
|
373
|
-
|
|
374
|
-
### Warning
|
|
375
|
-
|
|
376
|
-
```html
|
|
377
|
-
<div class="pf-v6-c-select pf-m-warning">
|
|
378
|
-
<span id="select-warning-label" hidden>Choose one</span>
|
|
379
|
-
|
|
380
|
-
<button
|
|
381
|
-
class="pf-v6-c-select__toggle"
|
|
382
|
-
type="button"
|
|
383
|
-
id="select-warning-toggle"
|
|
384
|
-
aria-haspopup="true"
|
|
385
|
-
aria-expanded="false"
|
|
386
|
-
aria-labelledby="select-warning-label select-warning-toggle"
|
|
387
|
-
>
|
|
388
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
389
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
390
|
-
</div>
|
|
391
|
-
<span class="pf-v6-c-select__toggle-status-icon">
|
|
392
|
-
<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
|
|
393
|
-
</span>
|
|
394
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
395
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
396
|
-
</span>
|
|
397
|
-
</button>
|
|
398
|
-
|
|
399
|
-
<ul
|
|
400
|
-
class="pf-v6-c-select__menu"
|
|
401
|
-
role="listbox"
|
|
402
|
-
aria-labelledby="select-warning-label"
|
|
403
|
-
hidden
|
|
404
|
-
>
|
|
405
|
-
<li role="presentation">
|
|
406
|
-
<button class="pf-v6-c-select__menu-item" role="option">Running</button>
|
|
407
|
-
</li>
|
|
408
|
-
<li role="presentation">
|
|
409
|
-
<button
|
|
410
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
411
|
-
role="option"
|
|
412
|
-
aria-selected="true"
|
|
413
|
-
>
|
|
414
|
-
Stopped
|
|
415
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
416
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
417
|
-
</span>
|
|
418
|
-
</button>
|
|
419
|
-
</li>
|
|
420
|
-
<li role="presentation">
|
|
421
|
-
<button class="pf-v6-c-select__menu-item" role="option">Down</button>
|
|
422
|
-
</li>
|
|
423
|
-
<li role="presentation">
|
|
424
|
-
<button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
|
|
425
|
-
</li>
|
|
426
|
-
<li role="presentation">
|
|
427
|
-
<button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
|
|
428
|
-
</li>
|
|
429
|
-
</ul>
|
|
430
|
-
</div>
|
|
431
|
-
|
|
432
|
-
```
|
|
433
|
-
|
|
434
|
-
### Invalid
|
|
435
|
-
|
|
436
|
-
```html
|
|
437
|
-
<div class="pf-v6-c-select pf-m-invalid">
|
|
438
|
-
<span id="select-invalid-label" hidden>Choose one</span>
|
|
439
|
-
|
|
440
|
-
<button
|
|
441
|
-
class="pf-v6-c-select__toggle"
|
|
442
|
-
type="button"
|
|
443
|
-
id="select-invalid-toggle"
|
|
444
|
-
aria-haspopup="true"
|
|
445
|
-
aria-expanded="false"
|
|
446
|
-
aria-labelledby="select-invalid-label select-invalid-toggle"
|
|
447
|
-
aria-invalid="true"
|
|
448
|
-
>
|
|
449
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
450
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
451
|
-
</div>
|
|
452
|
-
<span class="pf-v6-c-select__toggle-status-icon">
|
|
453
|
-
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
|
|
454
|
-
</span>
|
|
455
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
456
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
457
|
-
</span>
|
|
458
|
-
</button>
|
|
459
|
-
|
|
460
|
-
<ul
|
|
461
|
-
class="pf-v6-c-select__menu"
|
|
462
|
-
role="listbox"
|
|
463
|
-
aria-labelledby="select-invalid-label"
|
|
464
|
-
hidden
|
|
465
|
-
>
|
|
466
|
-
<li role="presentation">
|
|
467
|
-
<button class="pf-v6-c-select__menu-item" role="option">Running</button>
|
|
468
|
-
</li>
|
|
469
|
-
<li role="presentation">
|
|
470
|
-
<button
|
|
471
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
472
|
-
role="option"
|
|
473
|
-
aria-selected="true"
|
|
474
|
-
>
|
|
475
|
-
Stopped
|
|
476
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
477
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
478
|
-
</span>
|
|
479
|
-
</button>
|
|
480
|
-
</li>
|
|
481
|
-
<li role="presentation">
|
|
482
|
-
<button class="pf-v6-c-select__menu-item" role="option">Down</button>
|
|
483
|
-
</li>
|
|
484
|
-
<li role="presentation">
|
|
485
|
-
<button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
|
|
486
|
-
</li>
|
|
487
|
-
<li role="presentation">
|
|
488
|
-
<button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
|
|
489
|
-
</li>
|
|
490
|
-
</ul>
|
|
491
|
-
</div>
|
|
492
|
-
|
|
493
|
-
```
|
|
494
|
-
|
|
495
|
-
### Accessibility
|
|
496
|
-
|
|
497
|
-
| Attribute | Applied to | Outcome |
|
|
498
|
-
| -- | -- | -- |
|
|
499
|
-
| `aria-invalid="true"` | `.pf-v6-c-select__toggle` | Indicates that the select is in the invalid state. |
|
|
500
|
-
| `aria-selected="true"` | `.pf-v6-c-select__menu-item` | Should be set programmatically to indicate the active item. |
|
|
501
|
-
| `disabled` | `.pf-v6-c-select__toggle` | Disables the dropdown toggle and removes it from keyboard focus. |
|
|
502
|
-
|
|
503
|
-
### Usage
|
|
504
|
-
|
|
505
|
-
| Class | Applied to | Outcome |
|
|
506
|
-
| -- | -- | -- |
|
|
507
|
-
| `.pf-v6-c-select` | `<div>` | Initiates the select component. |
|
|
508
|
-
| `.pf-v6-c-select__toggle` | `<button>` | Initiates the select toggle. |
|
|
509
|
-
| `.pf-v6-c-select__toggle-wrapper` | `<div>` | Initiates the select toggle wrapper. |
|
|
510
|
-
| `.pf-v6-c-select__toggle-arrow` | `<span>` | Initiates the caret to toggle the dropdown. |
|
|
511
|
-
| `.pf-v6-c-select__menu` | `<ul>` | Initiates the select dropdown menu. |
|
|
512
|
-
| `.pf-v6-c-select__menu-item` | `<li>` | Initiates the items in the select dropdown menu. |
|
|
513
|
-
| `.pf-v6-c-select__menu-item-icon` | `<span>` | Initiates the selected item icon wrapper. |
|
|
514
|
-
| `.pf-m-expanded` | `.pf-v6-c-select` | Indicates the select is expanded. |
|
|
515
|
-
| `.pf-m-success` | `.pf-v6-c-select` | Modifies select component for the success state. |
|
|
516
|
-
| `.pf-m-warning` | `.pf-v6-c-select` | Modifies select component for the warning state. |
|
|
517
|
-
| `.pf-m-invalid` | `.pf-v6-c-select` | Modifies select component for the invalid state. |
|
|
518
|
-
| `.pf-m-selected` | `.pf-v6-c-select__menu-item` | Indicates the menu item is selected. |
|
|
519
|
-
| `.pf-m-disabled` | `div.pf-v6-c-select__toggle` | Modifies to display the select toggle as disabled. This applies to `div.pf-v6-c-select__toggle` and should not be used in lieu of the `disabled` attribute on `button.pf-v6-c-select__toggle`. When this is used, `disabled` should also be added to any form elements in `div.pf-v6-c-select__toggle`|
|
|
520
|
-
|
|
521
|
-
## Typeahead
|
|
522
|
-
|
|
523
|
-
### Single with typeahead
|
|
524
|
-
|
|
525
|
-
```html
|
|
526
|
-
<div class="pf-v6-c-select">
|
|
527
|
-
<span id="select-single-typeahead-label" hidden>Choose a state</span>
|
|
528
|
-
|
|
529
|
-
<div class="pf-v6-c-select__toggle pf-m-typeahead">
|
|
530
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
531
|
-
<span class="pf-v6-c-form-control pf-v6-c-select__toggle-typeahead">
|
|
532
|
-
<input
|
|
533
|
-
type="text"
|
|
534
|
-
id="select-single-typeahead-typeahead"
|
|
535
|
-
aria-label="Type to filter"
|
|
536
|
-
value
|
|
537
|
-
placeholder="Choose a state"
|
|
538
|
-
/>
|
|
539
|
-
</span>
|
|
540
|
-
</div>
|
|
541
|
-
<button
|
|
542
|
-
class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-button"
|
|
543
|
-
type="button"
|
|
544
|
-
id="select-single-typeahead-toggle"
|
|
545
|
-
aria-haspopup="true"
|
|
546
|
-
aria-expanded="false"
|
|
547
|
-
aria-labelledby="select-single-typeahead-label select-single-typeahead-toggle"
|
|
548
|
-
aria-label="Select"
|
|
549
|
-
>
|
|
550
|
-
<span class="pf-v6-c-button__text">
|
|
551
|
-
<i
|
|
552
|
-
class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
|
|
553
|
-
aria-hidden="true"
|
|
554
|
-
></i>
|
|
555
|
-
</span>
|
|
556
|
-
</button>
|
|
557
|
-
</div>
|
|
558
|
-
|
|
559
|
-
<ul
|
|
560
|
-
class="pf-v6-c-select__menu"
|
|
561
|
-
aria-labelledby="select-single-typeahead-label"
|
|
562
|
-
role="listbox"
|
|
563
|
-
hidden
|
|
564
|
-
>
|
|
565
|
-
<li role="presentation">
|
|
566
|
-
<button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
|
|
567
|
-
</li>
|
|
568
|
-
<li role="presentation">
|
|
569
|
-
<button class="pf-v6-c-select__menu-item" role="option">Florida</button>
|
|
570
|
-
</li>
|
|
571
|
-
<li role="presentation">
|
|
572
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
573
|
-
New
|
|
574
|
-
Jersey
|
|
575
|
-
</button>
|
|
576
|
-
</li>
|
|
577
|
-
<li role="presentation">
|
|
578
|
-
<button
|
|
579
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
580
|
-
role="option"
|
|
581
|
-
aria-selected="true"
|
|
582
|
-
>
|
|
583
|
-
New
|
|
584
|
-
Mexico
|
|
585
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
586
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
587
|
-
</span>
|
|
588
|
-
</button>
|
|
589
|
-
</li>
|
|
590
|
-
<li role="presentation">
|
|
591
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
592
|
-
New
|
|
593
|
-
York
|
|
594
|
-
</button>
|
|
595
|
-
</li>
|
|
596
|
-
<li role="presentation">
|
|
597
|
-
<button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
|
|
598
|
-
</li>
|
|
599
|
-
</ul>
|
|
600
|
-
</div>
|
|
601
|
-
|
|
602
|
-
```
|
|
603
|
-
|
|
604
|
-
### Single with typeahead expanded
|
|
605
|
-
|
|
606
|
-
```html
|
|
607
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
608
|
-
<span id="select-single-typeahead-expanded-label" hidden>Choose a state</span>
|
|
609
|
-
|
|
610
|
-
<div class="pf-v6-c-select__toggle pf-m-typeahead">
|
|
611
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
612
|
-
<span class="pf-v6-c-form-control pf-v6-c-select__toggle-typeahead">
|
|
613
|
-
<input
|
|
614
|
-
type="text"
|
|
615
|
-
id="select-single-typeahead-expanded-typeahead"
|
|
616
|
-
aria-label="Type to filter"
|
|
617
|
-
value="New"
|
|
618
|
-
placeholder="Choose a state"
|
|
619
|
-
/>
|
|
620
|
-
</span>
|
|
621
|
-
</div>
|
|
622
|
-
<button
|
|
623
|
-
class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-clear"
|
|
624
|
-
type="button"
|
|
625
|
-
aria-label="Clear all"
|
|
626
|
-
>
|
|
627
|
-
<span class="pf-v6-c-button__text">
|
|
628
|
-
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
629
|
-
</span>
|
|
630
|
-
</button>
|
|
631
|
-
<button
|
|
632
|
-
class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-button"
|
|
633
|
-
type="button"
|
|
634
|
-
id="select-single-typeahead-expanded-toggle"
|
|
635
|
-
aria-haspopup="true"
|
|
636
|
-
aria-expanded="true"
|
|
637
|
-
aria-labelledby="select-single-typeahead-expanded-label select-single-typeahead-expanded-toggle"
|
|
638
|
-
aria-label="Select"
|
|
639
|
-
>
|
|
640
|
-
<span class="pf-v6-c-button__text">
|
|
641
|
-
<i
|
|
642
|
-
class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
|
|
643
|
-
aria-hidden="true"
|
|
644
|
-
></i>
|
|
645
|
-
</span>
|
|
646
|
-
</button>
|
|
647
|
-
</div>
|
|
648
|
-
|
|
649
|
-
<ul
|
|
650
|
-
class="pf-v6-c-select__menu"
|
|
651
|
-
aria-labelledby="select-single-typeahead-expanded-label"
|
|
652
|
-
role="listbox"
|
|
653
|
-
>
|
|
654
|
-
<li role="presentation">
|
|
655
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
656
|
-
<mark class="pf-v6-c-select__menu-item--match">New</mark>
|
|
657
|
-
Jersey
|
|
658
|
-
</button>
|
|
659
|
-
</li>
|
|
660
|
-
<li role="presentation">
|
|
661
|
-
<button
|
|
662
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
663
|
-
role="option"
|
|
664
|
-
aria-selected="true"
|
|
665
|
-
>
|
|
666
|
-
<mark class="pf-v6-c-select__menu-item--match">New</mark>
|
|
667
|
-
Mexico
|
|
668
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
669
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
670
|
-
</span>
|
|
671
|
-
</button>
|
|
672
|
-
</li>
|
|
673
|
-
<li role="presentation">
|
|
674
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
675
|
-
<mark class="pf-v6-c-select__menu-item--match">New</mark>
|
|
676
|
-
York
|
|
677
|
-
</button>
|
|
678
|
-
</li>
|
|
679
|
-
</ul>
|
|
680
|
-
</div>
|
|
681
|
-
|
|
682
|
-
```
|
|
683
|
-
|
|
684
|
-
### Single with typeahead expanded and selected
|
|
685
|
-
|
|
686
|
-
```html
|
|
687
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
688
|
-
<span
|
|
689
|
-
id="select-single-typeahead-expanded-selected-label"
|
|
690
|
-
hidden
|
|
691
|
-
>Choose a state</span>
|
|
692
|
-
|
|
693
|
-
<div class="pf-v6-c-select__toggle pf-m-typeahead">
|
|
694
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
695
|
-
<span class="pf-v6-c-form-control pf-v6-c-select__toggle-typeahead">
|
|
696
|
-
<input
|
|
697
|
-
type="text"
|
|
698
|
-
id="select-single-typeahead-expanded-selected-typeahead"
|
|
699
|
-
aria-label="Type to filter"
|
|
700
|
-
value="New Mexico"
|
|
701
|
-
placeholder="Choose a state"
|
|
702
|
-
/>
|
|
703
|
-
</span>
|
|
704
|
-
</div>
|
|
705
|
-
<button
|
|
706
|
-
class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-clear"
|
|
707
|
-
type="button"
|
|
708
|
-
aria-label="Clear all"
|
|
709
|
-
>
|
|
710
|
-
<span class="pf-v6-c-button__text">
|
|
711
|
-
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
712
|
-
</span>
|
|
713
|
-
</button>
|
|
714
|
-
<button
|
|
715
|
-
class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-button"
|
|
716
|
-
type="button"
|
|
717
|
-
id="select-single-typeahead-expanded-selected-toggle"
|
|
718
|
-
aria-haspopup="true"
|
|
719
|
-
aria-expanded="true"
|
|
720
|
-
aria-labelledby="select-single-typeahead-expanded-selected-label select-single-typeahead-expanded-selected-toggle"
|
|
721
|
-
aria-label="Select"
|
|
722
|
-
>
|
|
723
|
-
<span class="pf-v6-c-button__text">
|
|
724
|
-
<i
|
|
725
|
-
class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
|
|
726
|
-
aria-hidden="true"
|
|
727
|
-
></i>
|
|
728
|
-
</span>
|
|
729
|
-
</button>
|
|
730
|
-
</div>
|
|
731
|
-
|
|
732
|
-
<ul
|
|
733
|
-
class="pf-v6-c-select__menu"
|
|
734
|
-
aria-labelledby="select-single-typeahead-expanded-selected-label"
|
|
735
|
-
role="listbox"
|
|
736
|
-
>
|
|
737
|
-
<li role="presentation">
|
|
738
|
-
<button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
|
|
739
|
-
</li>
|
|
740
|
-
<li role="presentation">
|
|
741
|
-
<button class="pf-v6-c-select__menu-item" role="option">Florida</button>
|
|
742
|
-
</li>
|
|
743
|
-
<li role="presentation">
|
|
744
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
745
|
-
New
|
|
746
|
-
Jersey
|
|
747
|
-
</button>
|
|
748
|
-
</li>
|
|
749
|
-
<li role="presentation">
|
|
750
|
-
<button
|
|
751
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
752
|
-
role="option"
|
|
753
|
-
aria-selected="true"
|
|
754
|
-
>
|
|
755
|
-
New
|
|
756
|
-
Mexico
|
|
757
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
758
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
759
|
-
</span>
|
|
760
|
-
</button>
|
|
761
|
-
</li>
|
|
762
|
-
<li role="presentation">
|
|
763
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
764
|
-
New
|
|
765
|
-
York
|
|
766
|
-
</button>
|
|
767
|
-
</li>
|
|
768
|
-
<li role="presentation">
|
|
769
|
-
<button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
|
|
770
|
-
</li>
|
|
771
|
-
</ul>
|
|
772
|
-
</div>
|
|
773
|
-
|
|
774
|
-
```
|
|
775
|
-
|
|
776
|
-
### Disabled with typeahead
|
|
777
|
-
|
|
778
|
-
```html
|
|
779
|
-
<div class="pf-v6-c-select">
|
|
780
|
-
<span id="select-single-typeahead-disabled-label" hidden>Choose a state</span>
|
|
781
|
-
|
|
782
|
-
<div class="pf-v6-c-select__toggle pf-m-typeahead pf-m-disabled">
|
|
783
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
784
|
-
<span
|
|
785
|
-
class="pf-v6-c-form-control pf-m-disabled pf-v6-c-select__toggle-typeahead"
|
|
786
|
-
>
|
|
787
|
-
<input
|
|
788
|
-
disabled
|
|
789
|
-
type="text"
|
|
790
|
-
id="select-single-typeahead-disabled-typeahead"
|
|
791
|
-
aria-label="Type to filter"
|
|
792
|
-
placeholder="Choose a state"
|
|
793
|
-
/>
|
|
794
|
-
</span>
|
|
795
|
-
</div>
|
|
796
|
-
<button
|
|
797
|
-
class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-button"
|
|
798
|
-
type="button"
|
|
799
|
-
id="select-single-typeahead-disabled-toggle"
|
|
800
|
-
aria-haspopup="true"
|
|
801
|
-
aria-expanded="false"
|
|
802
|
-
aria-labelledby="select-single-typeahead-disabled-label select-single-typeahead-disabled-toggle"
|
|
803
|
-
aria-label="Select"
|
|
804
|
-
disabled
|
|
805
|
-
>
|
|
806
|
-
<span class="pf-v6-c-button__text">
|
|
807
|
-
<i
|
|
808
|
-
class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
|
|
809
|
-
aria-hidden="true"
|
|
810
|
-
></i>
|
|
811
|
-
</span>
|
|
812
|
-
</button>
|
|
813
|
-
</div>
|
|
814
|
-
|
|
815
|
-
<ul
|
|
816
|
-
class="pf-v6-c-select__menu"
|
|
817
|
-
aria-labelledby="select-single-typeahead-disabled-label"
|
|
818
|
-
role="listbox"
|
|
819
|
-
hidden
|
|
820
|
-
>
|
|
821
|
-
<li role="presentation">
|
|
822
|
-
<button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
|
|
823
|
-
</li>
|
|
824
|
-
<li role="presentation">
|
|
825
|
-
<button class="pf-v6-c-select__menu-item" role="option">Florida</button>
|
|
826
|
-
</li>
|
|
827
|
-
<li role="presentation">
|
|
828
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
829
|
-
New
|
|
830
|
-
Jersey
|
|
831
|
-
</button>
|
|
832
|
-
</li>
|
|
833
|
-
<li role="presentation">
|
|
834
|
-
<button
|
|
835
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
836
|
-
role="option"
|
|
837
|
-
aria-selected="true"
|
|
838
|
-
>
|
|
839
|
-
New
|
|
840
|
-
Mexico
|
|
841
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
842
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
843
|
-
</span>
|
|
844
|
-
</button>
|
|
845
|
-
</li>
|
|
846
|
-
<li role="presentation">
|
|
847
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
848
|
-
New
|
|
849
|
-
York
|
|
850
|
-
</button>
|
|
851
|
-
</li>
|
|
852
|
-
<li role="presentation">
|
|
853
|
-
<button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
|
|
854
|
-
</li>
|
|
855
|
-
</ul>
|
|
856
|
-
</div>
|
|
857
|
-
|
|
858
|
-
```
|
|
859
|
-
|
|
860
|
-
### Invalid with typeahead
|
|
861
|
-
|
|
862
|
-
```html
|
|
863
|
-
<div class="pf-v6-c-select pf-m-invalid">
|
|
864
|
-
<span id="select-single-typeahead-invalid-label" hidden>Choose a state</span>
|
|
865
|
-
|
|
866
|
-
<div class="pf-v6-c-select__toggle pf-m-typeahead">
|
|
867
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
868
|
-
<span class="pf-v6-c-form-control pf-v6-c-select__toggle-typeahead">
|
|
869
|
-
<input
|
|
870
|
-
type="text"
|
|
871
|
-
id="select-single-typeahead-invalid-typeahead"
|
|
872
|
-
aria-invalid="true"
|
|
873
|
-
value="Invalid"
|
|
874
|
-
aria-label="Type to filter"
|
|
875
|
-
placeholder="Choose a state"
|
|
876
|
-
/>
|
|
877
|
-
</span>
|
|
878
|
-
</div>
|
|
879
|
-
<span class="pf-v6-c-select__toggle-status-icon">
|
|
880
|
-
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
|
|
881
|
-
</span>
|
|
882
|
-
<button
|
|
883
|
-
class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-button"
|
|
884
|
-
type="button"
|
|
885
|
-
id="select-single-typeahead-invalid-toggle"
|
|
886
|
-
aria-haspopup="true"
|
|
887
|
-
aria-expanded="false"
|
|
888
|
-
aria-labelledby="select-single-typeahead-invalid-label select-single-typeahead-invalid-toggle"
|
|
889
|
-
aria-label="Select"
|
|
890
|
-
>
|
|
891
|
-
<span class="pf-v6-c-button__text">
|
|
892
|
-
<i
|
|
893
|
-
class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
|
|
894
|
-
aria-hidden="true"
|
|
895
|
-
></i>
|
|
896
|
-
</span>
|
|
897
|
-
</button>
|
|
898
|
-
</div>
|
|
899
|
-
|
|
900
|
-
<ul
|
|
901
|
-
class="pf-v6-c-select__menu"
|
|
902
|
-
aria-labelledby="select-single-typeahead-invalid-label"
|
|
903
|
-
role="listbox"
|
|
904
|
-
hidden
|
|
905
|
-
>
|
|
906
|
-
<li role="presentation">
|
|
907
|
-
<button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
|
|
908
|
-
</li>
|
|
909
|
-
<li role="presentation">
|
|
910
|
-
<button class="pf-v6-c-select__menu-item" role="option">Florida</button>
|
|
911
|
-
</li>
|
|
912
|
-
<li role="presentation">
|
|
913
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
914
|
-
New
|
|
915
|
-
Jersey
|
|
916
|
-
</button>
|
|
917
|
-
</li>
|
|
918
|
-
<li role="presentation">
|
|
919
|
-
<button
|
|
920
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
921
|
-
role="option"
|
|
922
|
-
aria-selected="true"
|
|
923
|
-
>
|
|
924
|
-
New
|
|
925
|
-
Mexico
|
|
926
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
927
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
928
|
-
</span>
|
|
929
|
-
</button>
|
|
930
|
-
</li>
|
|
931
|
-
<li role="presentation">
|
|
932
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
933
|
-
New
|
|
934
|
-
York
|
|
935
|
-
</button>
|
|
936
|
-
</li>
|
|
937
|
-
<li role="presentation">
|
|
938
|
-
<button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
|
|
939
|
-
</li>
|
|
940
|
-
</ul>
|
|
941
|
-
</div>
|
|
942
|
-
|
|
943
|
-
```
|
|
944
|
-
|
|
945
|
-
The single select typeahead should be used when the user is selecting one option from a list of items with the option to narrow the list by typing from the keyboard. Selected items are removed from the list. The user can clear the selection and restore the placeholder text.
|
|
946
|
-
|
|
947
|
-
### Accessibility
|
|
948
|
-
|
|
949
|
-
| Attribute | Applied to | Outcome |
|
|
950
|
-
| -- | -- | -- |
|
|
951
|
-
| `aria-selected="true"` | `.pf-v6-c-select__menu-item` | Should be set programmatically to indicate the active item. |
|
|
952
|
-
|
|
953
|
-
### Usage
|
|
954
|
-
|
|
955
|
-
| Class | Applied to | Outcome |
|
|
956
|
-
| -- | -- | -- |
|
|
957
|
-
| `.pf-v6-c-select` | `<div>` | Initiates the select component. |
|
|
958
|
-
| `.pf-v6-c-select__toggle` | `<div>` | Initiates the select toggle. |
|
|
959
|
-
| `.pf-v6-c-select__toggle-wrapper` | `<div>` | Initiates the select toggle wrapper. |
|
|
960
|
-
| `.pf-v6-c-select__toggle-typeahead` | `input.pf-v6-c-form-control` | Initiates the input field for typeahead. |
|
|
961
|
-
| `.pf-v6-c-select__toggle-clear` | `button.pf-v6-c-button.pf-m-plain` | Initiates a clear button in the toggle. |
|
|
962
|
-
| `.pf-v6-c-select__toggle-button` | `button.pf-v6-c-button.pf-m-plain` | Initiates a toggle button. |
|
|
963
|
-
| `.pf-v6-c-select__toggle-arrow` | `<span>` | Initiates the caret icon. |
|
|
964
|
-
| `.pf-v6-c-select__menu` | `<ul>` | Initiates the select dropdown menu. |
|
|
965
|
-
| `.pf-v6-c-select__menu-item` | `<li>` | Initiates the items in the select dropdown menu. |
|
|
966
|
-
| `.pf-m-expanded` | `.pf-v6-c-select` | Indicates the select is expanded. |
|
|
967
|
-
| `.pf-m-typeahead` | `.pf-v6-c-select__toggle` | Indicates the select has a typeahead. |
|
|
968
|
-
| `.pf-m-focus` | `.pf-v6-c-select__menu-item` | Modifies the menu item to apply `:focus` styling. For use when navigating the menu items by keyboard when the typeahead input field has browser focus. |
|
|
969
|
-
|
|
970
|
-
## Typeahead multiselect
|
|
971
|
-
|
|
972
|
-
### Select multi with typeahead
|
|
973
|
-
|
|
974
|
-
```html
|
|
975
|
-
<div class="pf-v6-c-select">
|
|
976
|
-
<span id="select-multi-typeahead-label" hidden>Choose states</span>
|
|
977
|
-
|
|
978
|
-
<div class="pf-v6-c-select__toggle pf-m-typeahead">
|
|
979
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
980
|
-
<span class="pf-v6-c-form-control pf-v6-c-select__toggle-typeahead">
|
|
981
|
-
<input
|
|
982
|
-
type="text"
|
|
983
|
-
id="select-multi-typeahead-typeahead"
|
|
984
|
-
aria-label="Type to filter"
|
|
985
|
-
value
|
|
986
|
-
placeholder="Choose states"
|
|
987
|
-
/>
|
|
988
|
-
</span>
|
|
989
|
-
</div>
|
|
990
|
-
<button
|
|
991
|
-
class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-button"
|
|
992
|
-
type="button"
|
|
993
|
-
id="select-multi-typeahead-toggle"
|
|
994
|
-
aria-haspopup="true"
|
|
995
|
-
aria-expanded="false"
|
|
996
|
-
aria-labelledby="select-multi-typeahead-label select-multi-typeahead-toggle"
|
|
997
|
-
aria-label="Select"
|
|
998
|
-
>
|
|
999
|
-
<span class="pf-v6-c-button__text">
|
|
1000
|
-
<i
|
|
1001
|
-
class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
|
|
1002
|
-
aria-hidden="true"
|
|
1003
|
-
></i>
|
|
1004
|
-
</span>
|
|
1005
|
-
</button>
|
|
1006
|
-
</div>
|
|
1007
|
-
|
|
1008
|
-
<ul
|
|
1009
|
-
class="pf-v6-c-select__menu"
|
|
1010
|
-
aria-labelledby="select-multi-typeahead-label"
|
|
1011
|
-
role="listbox"
|
|
1012
|
-
hidden
|
|
1013
|
-
>
|
|
1014
|
-
<li role="presentation">
|
|
1015
|
-
<button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
|
|
1016
|
-
</li>
|
|
1017
|
-
<li role="presentation">
|
|
1018
|
-
<button class="pf-v6-c-select__menu-item" role="option">Florida</button>
|
|
1019
|
-
</li>
|
|
1020
|
-
<li role="presentation">
|
|
1021
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
1022
|
-
New
|
|
1023
|
-
Jersey
|
|
1024
|
-
</button>
|
|
1025
|
-
</li>
|
|
1026
|
-
<li role="presentation">
|
|
1027
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
1028
|
-
New
|
|
1029
|
-
York
|
|
1030
|
-
</button>
|
|
1031
|
-
</li>
|
|
1032
|
-
<li role="presentation">
|
|
1033
|
-
<button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
|
|
1034
|
-
</li>
|
|
1035
|
-
</ul>
|
|
1036
|
-
</div>
|
|
1037
|
-
|
|
1038
|
-
```
|
|
1039
|
-
|
|
1040
|
-
### Multi with typeahead (chip group expanded)
|
|
1041
|
-
|
|
1042
|
-
```html
|
|
1043
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
1044
|
-
<span id="select-multi-typeahead-expanded-label" hidden>Choose states</span>
|
|
1045
|
-
|
|
1046
|
-
<div class="pf-v6-c-select__toggle pf-m-typeahead">
|
|
1047
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
1048
|
-
<div class="pf-v6-c-label-group">
|
|
1049
|
-
<div class="pf-v6-c-label-group__main">
|
|
1050
|
-
<ul
|
|
1051
|
-
class="pf-v6-c-label-group__list"
|
|
1052
|
-
role="list"
|
|
1053
|
-
aria-label="Label group list"
|
|
1054
|
-
>
|
|
1055
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
1056
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
1057
|
-
<span class="pf-v6-c-label__content">
|
|
1058
|
-
<span class="pf-v6-c-label__content">
|
|
1059
|
-
<span
|
|
1060
|
-
class="pf-v6-c-label__text"
|
|
1061
|
-
id="select-multi-typeahead-expanded-label_one"
|
|
1062
|
-
>Arkansas</span>
|
|
1063
|
-
</span>
|
|
1064
|
-
<span class="pf-v6-c-label__actions">
|
|
1065
|
-
<button
|
|
1066
|
-
class="pf-v6-c-button pf-m-plain pf-m-no-padding"
|
|
1067
|
-
type="button"
|
|
1068
|
-
aria-labelledby="remove_select-multi-typeahead-expanded_label_one select-multi-typeahead-expanded-label_two"
|
|
1069
|
-
aria-label="Remove"
|
|
1070
|
-
id="remove_select-multi-typeahead-expanded_label_one"
|
|
1071
|
-
>
|
|
1072
|
-
<span class="pf-v6-c-button__text">
|
|
1073
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1074
|
-
</span>
|
|
1075
|
-
</button>
|
|
1076
|
-
</span>
|
|
1077
|
-
</span>
|
|
1078
|
-
</span>
|
|
1079
|
-
</li>
|
|
1080
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
1081
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
1082
|
-
<span class="pf-v6-c-label__content">
|
|
1083
|
-
<span class="pf-v6-c-label__content">
|
|
1084
|
-
<span
|
|
1085
|
-
class="pf-v6-c-label__text"
|
|
1086
|
-
id="select-multi-typeahead-expanded-label_two"
|
|
1087
|
-
>Massachusetts</span>
|
|
1088
|
-
</span>
|
|
1089
|
-
<span class="pf-v6-c-label__actions">
|
|
1090
|
-
<button
|
|
1091
|
-
class="pf-v6-c-button pf-m-plain pf-m-no-padding"
|
|
1092
|
-
type="button"
|
|
1093
|
-
aria-labelledby="remove_select-multi-typeahead-expanded_label_two select-multi-typeahead-expanded-label_two"
|
|
1094
|
-
aria-label="Remove"
|
|
1095
|
-
id="remove_select-multi-typeahead-expanded_label_two"
|
|
1096
|
-
>
|
|
1097
|
-
<span class="pf-v6-c-button__text">
|
|
1098
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1099
|
-
</span>
|
|
1100
|
-
</button>
|
|
1101
|
-
</span>
|
|
1102
|
-
</span>
|
|
1103
|
-
</span>
|
|
1104
|
-
</li>
|
|
1105
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
1106
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
1107
|
-
<span class="pf-v6-c-label__content">
|
|
1108
|
-
<span class="pf-v6-c-label__content">
|
|
1109
|
-
<span
|
|
1110
|
-
class="pf-v6-c-label__text"
|
|
1111
|
-
id="select-multi-typeahead-expanded-label_three"
|
|
1112
|
-
>New Mexico</span>
|
|
1113
|
-
</span>
|
|
1114
|
-
<span class="pf-v6-c-label__actions">
|
|
1115
|
-
<button
|
|
1116
|
-
class="pf-v6-c-button pf-m-plain pf-m-no-padding"
|
|
1117
|
-
type="button"
|
|
1118
|
-
aria-labelledby="remove_select-multi-typeahead-expanded_label_three select-multi-typeahead-expanded-label_three"
|
|
1119
|
-
aria-label="Remove"
|
|
1120
|
-
id="remove_select-multi-typeahead-expanded_label_three"
|
|
1121
|
-
>
|
|
1122
|
-
<span class="pf-v6-c-button__text">
|
|
1123
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1124
|
-
</span>
|
|
1125
|
-
</button>
|
|
1126
|
-
</span>
|
|
1127
|
-
</span>
|
|
1128
|
-
</span>
|
|
1129
|
-
</li>
|
|
1130
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
1131
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
1132
|
-
<span class="pf-v6-c-label__content">
|
|
1133
|
-
<span class="pf-v6-c-label__content">
|
|
1134
|
-
<span
|
|
1135
|
-
class="pf-v6-c-label__text"
|
|
1136
|
-
id="select-multi-typeahead-expanded-label_four"
|
|
1137
|
-
>Ohio</span>
|
|
1138
|
-
</span>
|
|
1139
|
-
<span class="pf-v6-c-label__actions">
|
|
1140
|
-
<button
|
|
1141
|
-
class="pf-v6-c-button pf-m-plain pf-m-no-padding"
|
|
1142
|
-
type="button"
|
|
1143
|
-
aria-labelledby="remove_select-multi-typeahead-expanded_label_four select-multi-typeahead-expanded-label_four"
|
|
1144
|
-
aria-label="Remove"
|
|
1145
|
-
id="remove_select-multi-typeahead-expanded_label_four"
|
|
1146
|
-
>
|
|
1147
|
-
<span class="pf-v6-c-button__text">
|
|
1148
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1149
|
-
</span>
|
|
1150
|
-
</button>
|
|
1151
|
-
</span>
|
|
1152
|
-
</span>
|
|
1153
|
-
</span>
|
|
1154
|
-
</li>
|
|
1155
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
1156
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
1157
|
-
<span class="pf-v6-c-label__content">
|
|
1158
|
-
<span class="pf-v6-c-label__content">
|
|
1159
|
-
<span
|
|
1160
|
-
class="pf-v6-c-label__text"
|
|
1161
|
-
id="select-multi-typeahead-expanded-label_five"
|
|
1162
|
-
>Washington</span>
|
|
1163
|
-
</span>
|
|
1164
|
-
<span class="pf-v6-c-label__actions">
|
|
1165
|
-
<button
|
|
1166
|
-
class="pf-v6-c-button pf-m-plain pf-m-no-padding"
|
|
1167
|
-
type="button"
|
|
1168
|
-
aria-labelledby="remove_select-multi-typeahead-expanded_label_five select-multi-typeahead-expanded-label_five"
|
|
1169
|
-
aria-label="Remove"
|
|
1170
|
-
id="remove_select-multi-typeahead-expanded_label_five"
|
|
1171
|
-
>
|
|
1172
|
-
<span class="pf-v6-c-button__text">
|
|
1173
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1174
|
-
</span>
|
|
1175
|
-
</button>
|
|
1176
|
-
</span>
|
|
1177
|
-
</span>
|
|
1178
|
-
</span>
|
|
1179
|
-
</li>
|
|
1180
|
-
</ul>
|
|
1181
|
-
</div>
|
|
1182
|
-
</div>
|
|
1183
|
-
<span class="pf-v6-c-form-control pf-v6-c-select__toggle-typeahead">
|
|
1184
|
-
<input
|
|
1185
|
-
type="text"
|
|
1186
|
-
id="select-multi-typeahead-expanded-typeahead"
|
|
1187
|
-
aria-label="Type to filter"
|
|
1188
|
-
value
|
|
1189
|
-
placeholder="Choose states"
|
|
1190
|
-
/>
|
|
1191
|
-
</span>
|
|
1192
|
-
</div>
|
|
1193
|
-
<button
|
|
1194
|
-
class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-clear"
|
|
1195
|
-
type="button"
|
|
1196
|
-
aria-label="Clear all"
|
|
1197
|
-
>
|
|
1198
|
-
<span class="pf-v6-c-button__text">
|
|
1199
|
-
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
1200
|
-
</span>
|
|
1201
|
-
</button>
|
|
1202
|
-
<button
|
|
1203
|
-
class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-button"
|
|
1204
|
-
type="button"
|
|
1205
|
-
id="select-multi-typeahead-expanded-toggle"
|
|
1206
|
-
aria-haspopup="true"
|
|
1207
|
-
aria-expanded="true"
|
|
1208
|
-
aria-labelledby="select-multi-typeahead-expanded-label select-multi-typeahead-expanded-toggle"
|
|
1209
|
-
aria-label="Select"
|
|
1210
|
-
>
|
|
1211
|
-
<span class="pf-v6-c-button__text">
|
|
1212
|
-
<i
|
|
1213
|
-
class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
|
|
1214
|
-
aria-hidden="true"
|
|
1215
|
-
></i>
|
|
1216
|
-
</span>
|
|
1217
|
-
</button>
|
|
1218
|
-
</div>
|
|
1219
|
-
|
|
1220
|
-
<ul
|
|
1221
|
-
class="pf-v6-c-select__menu"
|
|
1222
|
-
aria-labelledby="select-multi-typeahead-expanded-label"
|
|
1223
|
-
role="listbox"
|
|
1224
|
-
>
|
|
1225
|
-
<li role="presentation">
|
|
1226
|
-
<button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
|
|
1227
|
-
</li>
|
|
1228
|
-
<li role="presentation">
|
|
1229
|
-
<button class="pf-v6-c-select__menu-item" role="option">Florida</button>
|
|
1230
|
-
</li>
|
|
1231
|
-
<li role="presentation">
|
|
1232
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
1233
|
-
New
|
|
1234
|
-
Jersey
|
|
1235
|
-
</button>
|
|
1236
|
-
</li>
|
|
1237
|
-
<li role="presentation">
|
|
1238
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
1239
|
-
New
|
|
1240
|
-
York
|
|
1241
|
-
</button>
|
|
1242
|
-
</li>
|
|
1243
|
-
<li role="presentation">
|
|
1244
|
-
<button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
|
|
1245
|
-
</li>
|
|
1246
|
-
</ul>
|
|
1247
|
-
</div>
|
|
1248
|
-
|
|
1249
|
-
```
|
|
1250
|
-
|
|
1251
|
-
### Multi with typeahead (chip group collapsed)
|
|
1252
|
-
|
|
1253
|
-
```html
|
|
1254
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
1255
|
-
<span id="select-multi-typeahead-expanded-selected-label" hidden>Choose states</span>
|
|
1256
|
-
|
|
1257
|
-
<div class="pf-v6-c-select__toggle pf-m-typeahead">
|
|
1258
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
1259
|
-
<div class="pf-v6-c-label-group">
|
|
1260
|
-
<div class="pf-v6-c-label-group__main">
|
|
1261
|
-
<ul
|
|
1262
|
-
class="pf-v6-c-label-group__list"
|
|
1263
|
-
role="list"
|
|
1264
|
-
aria-label="Label group list"
|
|
1265
|
-
>
|
|
1266
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
1267
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
1268
|
-
<span class="pf-v6-c-label__content">
|
|
1269
|
-
<span class="pf-v6-c-label__content">
|
|
1270
|
-
<span
|
|
1271
|
-
class="pf-v6-c-label__text"
|
|
1272
|
-
id="select-multi-typeahead-expanded-selected-label_one"
|
|
1273
|
-
>Arkansas</span>
|
|
1274
|
-
</span>
|
|
1275
|
-
<span class="pf-v6-c-label__actions">
|
|
1276
|
-
<button
|
|
1277
|
-
class="pf-v6-c-button pf-m-plain pf-m-no-padding"
|
|
1278
|
-
type="button"
|
|
1279
|
-
aria-labelledby="remove_select-multi-typeahead-expanded-selected_label_one select-multi-typeahead-expanded-selected-label_one"
|
|
1280
|
-
aria-label="Remove"
|
|
1281
|
-
id="remove_select-multi-typeahead-expanded-selected_label_one"
|
|
1282
|
-
>
|
|
1283
|
-
<span class="pf-v6-c-button__text">
|
|
1284
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1285
|
-
</span>
|
|
1286
|
-
</button>
|
|
1287
|
-
</span>
|
|
1288
|
-
</span>
|
|
1289
|
-
</span>
|
|
1290
|
-
</li>
|
|
1291
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
1292
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
1293
|
-
<span class="pf-v6-c-label__content">
|
|
1294
|
-
<span class="pf-v6-c-label__content">
|
|
1295
|
-
<span
|
|
1296
|
-
class="pf-v6-c-label__text"
|
|
1297
|
-
id="select-multi-typeahead-expanded-selected-label_two"
|
|
1298
|
-
>Massachusetts</span>
|
|
1299
|
-
</span>
|
|
1300
|
-
<span class="pf-v6-c-label__actions">
|
|
1301
|
-
<button
|
|
1302
|
-
class="pf-v6-c-button pf-m-plain pf-m-no-padding"
|
|
1303
|
-
type="button"
|
|
1304
|
-
aria-labelledby="remove_select-multi-typeahead-expanded-selected_label_two select-multi-typeahead-expanded-selected-label_two"
|
|
1305
|
-
aria-label="Remove"
|
|
1306
|
-
id="remove_select-multi-typeahead-expanded-selected_label_two"
|
|
1307
|
-
>
|
|
1308
|
-
<span class="pf-v6-c-button__text">
|
|
1309
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1310
|
-
</span>
|
|
1311
|
-
</button>
|
|
1312
|
-
</span>
|
|
1313
|
-
</span>
|
|
1314
|
-
</span>
|
|
1315
|
-
</li>
|
|
1316
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
1317
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
1318
|
-
<span class="pf-v6-c-label__content">
|
|
1319
|
-
<span class="pf-v6-c-label__content">
|
|
1320
|
-
<span
|
|
1321
|
-
class="pf-v6-c-label__text"
|
|
1322
|
-
id="select-multi-typeahead-expanded-selected-label_three"
|
|
1323
|
-
>New Mexico</span>
|
|
1324
|
-
</span>
|
|
1325
|
-
<span class="pf-v6-c-label__actions">
|
|
1326
|
-
<button
|
|
1327
|
-
class="pf-v6-c-button pf-m-plain pf-m-no-padding"
|
|
1328
|
-
type="button"
|
|
1329
|
-
aria-labelledby="remove_select-multi-typeahead-expanded-selected_label_three select-multi-typeahead-expanded-selected-label_three"
|
|
1330
|
-
aria-label="Remove"
|
|
1331
|
-
id="remove_select-multi-typeahead-expanded-selected_label_three"
|
|
1332
|
-
>
|
|
1333
|
-
<span class="pf-v6-c-button__text">
|
|
1334
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1335
|
-
</span>
|
|
1336
|
-
</button>
|
|
1337
|
-
</span>
|
|
1338
|
-
</span>
|
|
1339
|
-
</span>
|
|
1340
|
-
</li>
|
|
1341
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
1342
|
-
<button class="pf-v6-c-label pf-m-overflow">
|
|
1343
|
-
<span class="pf-v6-c-label__content">
|
|
1344
|
-
<span class="pf-v6-c-label__content">
|
|
1345
|
-
<span class="pf-v6-c-label__text">2 more</span>
|
|
1346
|
-
</span>
|
|
1347
|
-
</span>
|
|
1348
|
-
</button>
|
|
1349
|
-
</li>
|
|
1350
|
-
</ul>
|
|
1351
|
-
</div>
|
|
1352
|
-
</div>
|
|
1353
|
-
<span class="pf-v6-c-form-control pf-v6-c-select__toggle-typeahead">
|
|
1354
|
-
<input
|
|
1355
|
-
type="text"
|
|
1356
|
-
id="select-multi-typeahead-expanded-selected-typeahead"
|
|
1357
|
-
aria-label="Type to filter"
|
|
1358
|
-
value="New"
|
|
1359
|
-
placeholder="Choose states"
|
|
1360
|
-
/>
|
|
1361
|
-
</span>
|
|
1362
|
-
</div>
|
|
1363
|
-
<button
|
|
1364
|
-
class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-clear"
|
|
1365
|
-
type="button"
|
|
1366
|
-
aria-label="Clear all"
|
|
1367
|
-
>
|
|
1368
|
-
<span class="pf-v6-c-button__text">
|
|
1369
|
-
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
1370
|
-
</span>
|
|
1371
|
-
</button>
|
|
1372
|
-
<button
|
|
1373
|
-
class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-button"
|
|
1374
|
-
type="button"
|
|
1375
|
-
id="select-multi-typeahead-expanded-selected-toggle"
|
|
1376
|
-
aria-haspopup="true"
|
|
1377
|
-
aria-expanded="true"
|
|
1378
|
-
aria-labelledby="select-multi-typeahead-expanded-selected-label select-multi-typeahead-expanded-selected-toggle"
|
|
1379
|
-
aria-label="Select"
|
|
1380
|
-
>
|
|
1381
|
-
<span class="pf-v6-c-button__text">
|
|
1382
|
-
<i
|
|
1383
|
-
class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
|
|
1384
|
-
aria-hidden="true"
|
|
1385
|
-
></i>
|
|
1386
|
-
</span>
|
|
1387
|
-
</button>
|
|
1388
|
-
</div>
|
|
1389
|
-
|
|
1390
|
-
<ul
|
|
1391
|
-
class="pf-v6-c-select__menu"
|
|
1392
|
-
aria-labelledby="select-multi-typeahead-expanded-selected-label"
|
|
1393
|
-
role="listbox"
|
|
1394
|
-
>
|
|
1395
|
-
<li role="presentation">
|
|
1396
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
1397
|
-
<mark class="pf-v6-c-select__menu-item--match">New</mark>
|
|
1398
|
-
Jersey
|
|
1399
|
-
</button>
|
|
1400
|
-
</li>
|
|
1401
|
-
<li role="presentation">
|
|
1402
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
1403
|
-
<mark class="pf-v6-c-select__menu-item--match">New</mark>
|
|
1404
|
-
York
|
|
1405
|
-
</button>
|
|
1406
|
-
</li>
|
|
1407
|
-
</ul>
|
|
1408
|
-
</div>
|
|
1409
|
-
|
|
1410
|
-
```
|
|
1411
|
-
|
|
1412
|
-
### Multi with typeahead invalid
|
|
1413
|
-
|
|
1414
|
-
```html
|
|
1415
|
-
<div class="pf-v6-c-select pf-m-expanded pf-m-invalid">
|
|
1416
|
-
<span id="select-multi-typeahead-invalid-label" hidden>Choose states</span>
|
|
1417
|
-
|
|
1418
|
-
<div class="pf-v6-c-select__toggle pf-m-typeahead">
|
|
1419
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
1420
|
-
<div class="pf-v6-c-label-group">
|
|
1421
|
-
<div class="pf-v6-c-label-group__main">
|
|
1422
|
-
<ul
|
|
1423
|
-
class="pf-v6-c-label-group__list"
|
|
1424
|
-
role="list"
|
|
1425
|
-
aria-label="Label group list"
|
|
1426
|
-
>
|
|
1427
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
1428
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
1429
|
-
<span class="pf-v6-c-label__content">
|
|
1430
|
-
<span class="pf-v6-c-label__content">
|
|
1431
|
-
<span
|
|
1432
|
-
class="pf-v6-c-label__text"
|
|
1433
|
-
id="select-multi-typeahead-invalid-label_one"
|
|
1434
|
-
>Arkansas</span>
|
|
1435
|
-
</span>
|
|
1436
|
-
<span class="pf-v6-c-label__actions">
|
|
1437
|
-
<button
|
|
1438
|
-
class="pf-v6-c-button pf-m-plain pf-m-no-padding"
|
|
1439
|
-
type="button"
|
|
1440
|
-
aria-labelledby="remove_select-multi-typeahead-invalid_label_one select-multi-typeahead-invalid-label_two"
|
|
1441
|
-
aria-label="Remove"
|
|
1442
|
-
id="remove_select-multi-typeahead-invalid_label_one"
|
|
1443
|
-
>
|
|
1444
|
-
<span class="pf-v6-c-button__text">
|
|
1445
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1446
|
-
</span>
|
|
1447
|
-
</button>
|
|
1448
|
-
</span>
|
|
1449
|
-
</span>
|
|
1450
|
-
</span>
|
|
1451
|
-
</li>
|
|
1452
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
1453
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
1454
|
-
<span class="pf-v6-c-label__content">
|
|
1455
|
-
<span class="pf-v6-c-label__content">
|
|
1456
|
-
<span
|
|
1457
|
-
class="pf-v6-c-label__text"
|
|
1458
|
-
id="select-multi-typeahead-invalid-label_two"
|
|
1459
|
-
>Massachusetts</span>
|
|
1460
|
-
</span>
|
|
1461
|
-
<span class="pf-v6-c-label__actions">
|
|
1462
|
-
<button
|
|
1463
|
-
class="pf-v6-c-button pf-m-plain pf-m-no-padding"
|
|
1464
|
-
type="button"
|
|
1465
|
-
aria-labelledby="remove_select-multi-typeahead-invalid_label_two select-multi-typeahead-invalid-label_two"
|
|
1466
|
-
aria-label="Remove"
|
|
1467
|
-
id="remove_select-multi-typeahead-invalid_label_two"
|
|
1468
|
-
>
|
|
1469
|
-
<span class="pf-v6-c-button__text">
|
|
1470
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1471
|
-
</span>
|
|
1472
|
-
</button>
|
|
1473
|
-
</span>
|
|
1474
|
-
</span>
|
|
1475
|
-
</span>
|
|
1476
|
-
</li>
|
|
1477
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
1478
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
1479
|
-
<span class="pf-v6-c-label__content">
|
|
1480
|
-
<span class="pf-v6-c-label__content">
|
|
1481
|
-
<span
|
|
1482
|
-
class="pf-v6-c-label__text"
|
|
1483
|
-
id="select-multi-typeahead-invalid-label_three"
|
|
1484
|
-
>New Mexico</span>
|
|
1485
|
-
</span>
|
|
1486
|
-
<span class="pf-v6-c-label__actions">
|
|
1487
|
-
<button
|
|
1488
|
-
class="pf-v6-c-button pf-m-plain pf-m-no-padding"
|
|
1489
|
-
type="button"
|
|
1490
|
-
aria-labelledby="remove_select-multi-typeahead-invalid_label_three select-multi-typeahead-invalid-label_three"
|
|
1491
|
-
aria-label="Remove"
|
|
1492
|
-
id="remove_select-multi-typeahead-invalid_label_three"
|
|
1493
|
-
>
|
|
1494
|
-
<span class="pf-v6-c-button__text">
|
|
1495
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1496
|
-
</span>
|
|
1497
|
-
</button>
|
|
1498
|
-
</span>
|
|
1499
|
-
</span>
|
|
1500
|
-
</span>
|
|
1501
|
-
</li>
|
|
1502
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
1503
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
1504
|
-
<span class="pf-v6-c-label__content">
|
|
1505
|
-
<span class="pf-v6-c-label__content">
|
|
1506
|
-
<span
|
|
1507
|
-
class="pf-v6-c-label__text"
|
|
1508
|
-
id="select-multi-typeahead-invalid-label_four"
|
|
1509
|
-
>Ohio</span>
|
|
1510
|
-
</span>
|
|
1511
|
-
<span class="pf-v6-c-label__actions">
|
|
1512
|
-
<button
|
|
1513
|
-
class="pf-v6-c-button pf-m-plain pf-m-no-padding"
|
|
1514
|
-
type="button"
|
|
1515
|
-
aria-labelledby="remove_select-multi-typeahead-invalid_label_four select-multi-typeahead-invalid-label_four"
|
|
1516
|
-
aria-label="Remove"
|
|
1517
|
-
id="remove_select-multi-typeahead-invalid_label_four"
|
|
1518
|
-
>
|
|
1519
|
-
<span class="pf-v6-c-button__text">
|
|
1520
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1521
|
-
</span>
|
|
1522
|
-
</button>
|
|
1523
|
-
</span>
|
|
1524
|
-
</span>
|
|
1525
|
-
</span>
|
|
1526
|
-
</li>
|
|
1527
|
-
<li class="pf-v6-c-label-group__list-item">
|
|
1528
|
-
<span class="pf-v6-c-label pf-m-outline">
|
|
1529
|
-
<span class="pf-v6-c-label__content">
|
|
1530
|
-
<span class="pf-v6-c-label__content">
|
|
1531
|
-
<span
|
|
1532
|
-
class="pf-v6-c-label__text"
|
|
1533
|
-
id="select-multi-typeahead-invalid-label_five"
|
|
1534
|
-
>Washington</span>
|
|
1535
|
-
</span>
|
|
1536
|
-
<span class="pf-v6-c-label__actions">
|
|
1537
|
-
<button
|
|
1538
|
-
class="pf-v6-c-button pf-m-plain pf-m-no-padding"
|
|
1539
|
-
type="button"
|
|
1540
|
-
aria-labelledby="remove_select-multi-typeahead-invalid_label_five select-multi-typeahead-invalid-label_five"
|
|
1541
|
-
aria-label="Remove"
|
|
1542
|
-
id="remove_select-multi-typeahead-invalid_label_five"
|
|
1543
|
-
>
|
|
1544
|
-
<span class="pf-v6-c-button__text">
|
|
1545
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1546
|
-
</span>
|
|
1547
|
-
</button>
|
|
1548
|
-
</span>
|
|
1549
|
-
</span>
|
|
1550
|
-
</span>
|
|
1551
|
-
</li>
|
|
1552
|
-
</ul>
|
|
1553
|
-
</div>
|
|
1554
|
-
</div>
|
|
1555
|
-
<span class="pf-v6-c-form-control pf-v6-c-select__toggle-typeahead">
|
|
1556
|
-
<input
|
|
1557
|
-
type="text"
|
|
1558
|
-
id="select-multi-typeahead-invalid-typeahead"
|
|
1559
|
-
aria-invalid="true"
|
|
1560
|
-
value="Invalid"
|
|
1561
|
-
aria-label="Type to filter"
|
|
1562
|
-
placeholder="Choose states"
|
|
1563
|
-
/>
|
|
1564
|
-
</span>
|
|
1565
|
-
</div>
|
|
1566
|
-
<span class="pf-v6-c-select__toggle-status-icon">
|
|
1567
|
-
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
|
|
1568
|
-
</span>
|
|
1569
|
-
<button
|
|
1570
|
-
class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-clear"
|
|
1571
|
-
type="button"
|
|
1572
|
-
aria-label="Clear all"
|
|
1573
|
-
>
|
|
1574
|
-
<span class="pf-v6-c-button__text">
|
|
1575
|
-
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
1576
|
-
</span>
|
|
1577
|
-
</button>
|
|
1578
|
-
<button
|
|
1579
|
-
class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-button"
|
|
1580
|
-
type="button"
|
|
1581
|
-
id="select-multi-typeahead-invalid-toggle"
|
|
1582
|
-
aria-haspopup="true"
|
|
1583
|
-
aria-expanded="true"
|
|
1584
|
-
aria-labelledby="select-multi-typeahead-invalid-label select-multi-typeahead-invalid-toggle"
|
|
1585
|
-
aria-label="Select"
|
|
1586
|
-
>
|
|
1587
|
-
<span class="pf-v6-c-button__text">
|
|
1588
|
-
<i
|
|
1589
|
-
class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
|
|
1590
|
-
aria-hidden="true"
|
|
1591
|
-
></i>
|
|
1592
|
-
</span>
|
|
1593
|
-
</button>
|
|
1594
|
-
</div>
|
|
1595
|
-
|
|
1596
|
-
<ul
|
|
1597
|
-
class="pf-v6-c-select__menu"
|
|
1598
|
-
aria-labelledby="select-multi-typeahead-invalid-label"
|
|
1599
|
-
role="listbox"
|
|
1600
|
-
>
|
|
1601
|
-
<li role="presentation">
|
|
1602
|
-
<button class="pf-v6-c-select__menu-item" role="option">Alabama</button>
|
|
1603
|
-
</li>
|
|
1604
|
-
<li role="presentation">
|
|
1605
|
-
<button class="pf-v6-c-select__menu-item" role="option">Florida</button>
|
|
1606
|
-
</li>
|
|
1607
|
-
<li role="presentation">
|
|
1608
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
1609
|
-
New
|
|
1610
|
-
Jersey
|
|
1611
|
-
</button>
|
|
1612
|
-
</li>
|
|
1613
|
-
<li role="presentation">
|
|
1614
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
1615
|
-
New
|
|
1616
|
-
York
|
|
1617
|
-
</button>
|
|
1618
|
-
</li>
|
|
1619
|
-
<li role="presentation">
|
|
1620
|
-
<button class="pf-v6-c-select__menu-item" role="option">North Carolina</button>
|
|
1621
|
-
</li>
|
|
1622
|
-
</ul>
|
|
1623
|
-
</div>
|
|
1624
|
-
|
|
1625
|
-
```
|
|
1626
|
-
|
|
1627
|
-
The multiselect should be used when the user is selecting multiple items from a list. The user can narrow the list by typing from the keyboard. The List updates while typing. Selected items create a new chip and are removed from the list. The user may clear selections individually or all at once to restore the placeholder.
|
|
1628
|
-
|
|
1629
|
-
### Accessibility
|
|
1630
|
-
|
|
1631
|
-
| Attribute | Applied to | Outcome |
|
|
1632
|
-
| -- | -- | -- |
|
|
1633
|
-
| `aria-selected="true"` | `.pf-v6-c-select__menu-item` | Should be set programmatically to indicate the active item. |
|
|
1634
|
-
|
|
1635
|
-
### Usage
|
|
1636
|
-
|
|
1637
|
-
| Class | Applied to | Outcome |
|
|
1638
|
-
| -- | -- | -- |
|
|
1639
|
-
| `.pf-v6-c-select` | `<div>` | Initiates the select component. |
|
|
1640
|
-
| `.pf-v6-c-select__toggle` | `<div>` | Initiates the select toggle. |
|
|
1641
|
-
| `.pf-v6-c-select__toggle-wrapper` | `<div>` | Initiates the select toggle wrapper so that chips and input field can wrap together. |
|
|
1642
|
-
| `.pf-v6-c-chip` | `<div>` | Initiates a chip. (See [chip component](/components/chip) for more details) |
|
|
1643
|
-
| `.pf-v6-c-select__toggle-typeahead` | `input.pf-v6-c-form-control` | Initiates the input field for typeahead. |
|
|
1644
|
-
| `.pf-v6-c-select__toggle-clear` | `button.pf-m-plain` | Initiates a clear button in the toggle. |
|
|
1645
|
-
| `.pf-v6-c-select__toggle-button` | `<button>` | Initiates a toggle button. |
|
|
1646
|
-
| `.pf-v6-c-select__toggle-arrow` | `<span>` | Initiates the caret icon. |
|
|
1647
|
-
| `.pf-v6-c-select__menu` | `<ul>` | Initiates the select dropdown menu. |
|
|
1648
|
-
| `.pf-v6-c-select__menu-item` | `<li>` | Initiates the items in the select dropdown menu. |
|
|
1649
|
-
| `.pf-m-expanded` | `.pf-v6-c-select` | Indicates the select is expanded. |
|
|
1650
|
-
| `.pf-m-typeahead` | `.pf-v6-c-select__toggle` | Indicates the select has a typeahead. |
|
|
1651
|
-
|
|
1652
|
-
## Checkbox
|
|
1653
|
-
|
|
1654
|
-
### Checkbox select
|
|
1655
|
-
|
|
1656
|
-
```html
|
|
1657
|
-
<div class="pf-v6-c-select">
|
|
1658
|
-
<span id="select-checkbox-label" hidden>Choose many</span>
|
|
1659
|
-
|
|
1660
|
-
<button
|
|
1661
|
-
class="pf-v6-c-select__toggle"
|
|
1662
|
-
type="button"
|
|
1663
|
-
id="select-checkbox-toggle"
|
|
1664
|
-
aria-haspopup="true"
|
|
1665
|
-
aria-expanded="false"
|
|
1666
|
-
aria-labelledby="select-checkbox-label select-checkbox-toggle"
|
|
1667
|
-
>
|
|
1668
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
1669
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
1670
|
-
</div>
|
|
1671
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
1672
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1673
|
-
</span>
|
|
1674
|
-
</button>
|
|
1675
|
-
|
|
1676
|
-
<div class="pf-v6-c-select__menu" hidden>
|
|
1677
|
-
<fieldset class="pf-v6-c-select__menu-fieldset" aria-label="Select input">
|
|
1678
|
-
<label
|
|
1679
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item pf-m-description"
|
|
1680
|
-
id="select-checkbox-active"
|
|
1681
|
-
for="select-checkbox-active-input"
|
|
1682
|
-
>
|
|
1683
|
-
<input
|
|
1684
|
-
class="pf-v6-c-check__input"
|
|
1685
|
-
type="checkbox"
|
|
1686
|
-
aria-describedby="select-checkbox-active-description"
|
|
1687
|
-
id="select-checkbox-active-input"
|
|
1688
|
-
name="select-checkbox-active-input"
|
|
1689
|
-
/>
|
|
1690
|
-
<span class="pf-v6-c-check__label">Active</span>
|
|
1691
|
-
<span
|
|
1692
|
-
class="pf-v6-c-check__description"
|
|
1693
|
-
id="select-checkbox-active-description"
|
|
1694
|
-
>This is a description</span>
|
|
1695
|
-
</label>
|
|
1696
|
-
<label
|
|
1697
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item pf-m-description"
|
|
1698
|
-
id="select-checkbox-canceled"
|
|
1699
|
-
for="select-checkbox-canceled-input"
|
|
1700
|
-
>
|
|
1701
|
-
<input
|
|
1702
|
-
class="pf-v6-c-check__input"
|
|
1703
|
-
type="checkbox"
|
|
1704
|
-
aria-describedby="select-checkbox-canceled-description"
|
|
1705
|
-
id="select-checkbox-canceled-input"
|
|
1706
|
-
name="select-checkbox-canceled-input"
|
|
1707
|
-
/>
|
|
1708
|
-
<span class="pf-v6-c-check__label">Canceled</span>
|
|
1709
|
-
<span
|
|
1710
|
-
class="pf-v6-c-check__description"
|
|
1711
|
-
id="select-checkbox-canceled-description"
|
|
1712
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
1713
|
-
</label>
|
|
1714
|
-
<label
|
|
1715
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
1716
|
-
id="select-checkbox-paused"
|
|
1717
|
-
for="select-checkbox-paused-input"
|
|
1718
|
-
>
|
|
1719
|
-
<input
|
|
1720
|
-
class="pf-v6-c-check__input"
|
|
1721
|
-
type="checkbox"
|
|
1722
|
-
id="select-checkbox-paused-input"
|
|
1723
|
-
name="select-checkbox-paused-input"
|
|
1724
|
-
/>
|
|
1725
|
-
<span class="pf-v6-c-check__label">Paused</span>
|
|
1726
|
-
</label>
|
|
1727
|
-
<label
|
|
1728
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
1729
|
-
id="select-checkbox-warning"
|
|
1730
|
-
for="select-checkbox-warning-input"
|
|
1731
|
-
>
|
|
1732
|
-
<input
|
|
1733
|
-
class="pf-v6-c-check__input"
|
|
1734
|
-
type="checkbox"
|
|
1735
|
-
id="select-checkbox-warning-input"
|
|
1736
|
-
name="select-checkbox-warning-input"
|
|
1737
|
-
/>
|
|
1738
|
-
<span class="pf-v6-c-check__label">Warning</span>
|
|
1739
|
-
</label>
|
|
1740
|
-
<label
|
|
1741
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
1742
|
-
id="select-checkbox-restarted"
|
|
1743
|
-
for="select-checkbox-restarted-input"
|
|
1744
|
-
>
|
|
1745
|
-
<input
|
|
1746
|
-
class="pf-v6-c-check__input"
|
|
1747
|
-
type="checkbox"
|
|
1748
|
-
id="select-checkbox-restarted-input"
|
|
1749
|
-
name="select-checkbox-restarted-input"
|
|
1750
|
-
/>
|
|
1751
|
-
<span class="pf-v6-c-check__label">Restarted</span>
|
|
1752
|
-
</label>
|
|
1753
|
-
</fieldset>
|
|
1754
|
-
</div>
|
|
1755
|
-
</div>
|
|
1756
|
-
|
|
1757
|
-
```
|
|
1758
|
-
|
|
1759
|
-
### Checkbox expanded
|
|
1760
|
-
|
|
1761
|
-
```html
|
|
1762
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
1763
|
-
<span id="select-checkbox-expanded-label" hidden>Choose many</span>
|
|
1764
|
-
|
|
1765
|
-
<button
|
|
1766
|
-
class="pf-v6-c-select__toggle"
|
|
1767
|
-
type="button"
|
|
1768
|
-
id="select-checkbox-expanded-toggle"
|
|
1769
|
-
aria-haspopup="true"
|
|
1770
|
-
aria-expanded="true"
|
|
1771
|
-
aria-labelledby="select-checkbox-expanded-label select-checkbox-expanded-toggle"
|
|
1772
|
-
>
|
|
1773
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
1774
|
-
<span class="pf-v6-c-select__toggle-text">Filter</span>
|
|
1775
|
-
</div>
|
|
1776
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
1777
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1778
|
-
</span>
|
|
1779
|
-
</button>
|
|
1780
|
-
|
|
1781
|
-
<div class="pf-v6-c-select__menu">
|
|
1782
|
-
<fieldset class="pf-v6-c-select__menu-fieldset" aria-label="Select input">
|
|
1783
|
-
<label
|
|
1784
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
1785
|
-
id="select-checkbox-expanded-check-active"
|
|
1786
|
-
for="select-checkbox-expanded-check-active-input"
|
|
1787
|
-
>
|
|
1788
|
-
<input
|
|
1789
|
-
class="pf-v6-c-check__input"
|
|
1790
|
-
type="checkbox"
|
|
1791
|
-
id="select-checkbox-expanded-check-active-input"
|
|
1792
|
-
name="select-checkbox-expanded-check-active-input"
|
|
1793
|
-
checked
|
|
1794
|
-
/>
|
|
1795
|
-
<span class="pf-v6-c-check__label">Active</span>
|
|
1796
|
-
</label>
|
|
1797
|
-
<label
|
|
1798
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
1799
|
-
id="select-checkbox-expanded-check-canceled"
|
|
1800
|
-
for="select-checkbox-expanded-check-canceled-input"
|
|
1801
|
-
>
|
|
1802
|
-
<input
|
|
1803
|
-
class="pf-v6-c-check__input"
|
|
1804
|
-
type="checkbox"
|
|
1805
|
-
id="select-checkbox-expanded-check-canceled-input"
|
|
1806
|
-
name="select-checkbox-expanded-check-canceled-input"
|
|
1807
|
-
checked
|
|
1808
|
-
/>
|
|
1809
|
-
<span class="pf-v6-c-check__label">Canceled</span>
|
|
1810
|
-
</label>
|
|
1811
|
-
<label
|
|
1812
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
1813
|
-
id="select-checkbox-expanded-check-paused"
|
|
1814
|
-
for="select-checkbox-expanded-check-paused-input"
|
|
1815
|
-
>
|
|
1816
|
-
<input
|
|
1817
|
-
class="pf-v6-c-check__input"
|
|
1818
|
-
type="checkbox"
|
|
1819
|
-
id="select-checkbox-expanded-check-paused-input"
|
|
1820
|
-
name="select-checkbox-expanded-check-paused-input"
|
|
1821
|
-
/>
|
|
1822
|
-
<span class="pf-v6-c-check__label">Paused</span>
|
|
1823
|
-
</label>
|
|
1824
|
-
<label
|
|
1825
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
1826
|
-
id="select-checkbox-expanded-check-warning"
|
|
1827
|
-
for="select-checkbox-expanded-check-warning-input"
|
|
1828
|
-
>
|
|
1829
|
-
<input
|
|
1830
|
-
class="pf-v6-c-check__input"
|
|
1831
|
-
type="checkbox"
|
|
1832
|
-
id="select-checkbox-expanded-check-warning-input"
|
|
1833
|
-
name="select-checkbox-expanded-check-warning-input"
|
|
1834
|
-
checked
|
|
1835
|
-
/>
|
|
1836
|
-
<span class="pf-v6-c-check__label">Warning</span>
|
|
1837
|
-
</label>
|
|
1838
|
-
<label
|
|
1839
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
1840
|
-
id="select-checkbox-expanded-check-restarted"
|
|
1841
|
-
for="select-checkbox-expanded-check-restarted-input"
|
|
1842
|
-
>
|
|
1843
|
-
<input
|
|
1844
|
-
class="pf-v6-c-check__input"
|
|
1845
|
-
type="checkbox"
|
|
1846
|
-
id="select-checkbox-expanded-check-restarted-input"
|
|
1847
|
-
name="select-checkbox-expanded-check-restarted-input"
|
|
1848
|
-
/>
|
|
1849
|
-
<span class="pf-v6-c-check__label">Restarted</span>
|
|
1850
|
-
</label>
|
|
1851
|
-
</fieldset>
|
|
1852
|
-
</div>
|
|
1853
|
-
</div>
|
|
1854
|
-
|
|
1855
|
-
```
|
|
1856
|
-
|
|
1857
|
-
### Checkbox expanded and selected with groups
|
|
1858
|
-
|
|
1859
|
-
```html
|
|
1860
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
1861
|
-
<span id="select-checkbox-expanded-selected-label" hidden>Choose many</span>
|
|
1862
|
-
|
|
1863
|
-
<button
|
|
1864
|
-
class="pf-v6-c-select__toggle"
|
|
1865
|
-
type="button"
|
|
1866
|
-
id="select-checkbox-expanded-selected-toggle"
|
|
1867
|
-
aria-haspopup="true"
|
|
1868
|
-
aria-expanded="true"
|
|
1869
|
-
aria-labelledby="select-checkbox-expanded-selected-label select-checkbox-expanded-selected-toggle"
|
|
1870
|
-
>
|
|
1871
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
1872
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
1873
|
-
</div>
|
|
1874
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
1875
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1876
|
-
</span>
|
|
1877
|
-
</button>
|
|
1878
|
-
|
|
1879
|
-
<div class="pf-v6-c-select__menu">
|
|
1880
|
-
<div class="pf-v6-c-select__menu-group">
|
|
1881
|
-
<div
|
|
1882
|
-
class="pf-v6-c-select__menu-group-title"
|
|
1883
|
-
aria-hidden="true"
|
|
1884
|
-
id="select-checkbox-expanded-selected-group-status"
|
|
1885
|
-
>Status</div>
|
|
1886
|
-
<fieldset
|
|
1887
|
-
class="pf-v6-c-select__menu-fieldset"
|
|
1888
|
-
aria-labelledby="select-checkbox-expanded-selected-group-status"
|
|
1889
|
-
>
|
|
1890
|
-
<label
|
|
1891
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
1892
|
-
id="select-checkbox-expanded-selected-check-running"
|
|
1893
|
-
for="select-checkbox-expanded-selected-check-running-input"
|
|
1894
|
-
>
|
|
1895
|
-
<input
|
|
1896
|
-
class="pf-v6-c-check__input"
|
|
1897
|
-
type="checkbox"
|
|
1898
|
-
id="select-checkbox-expanded-selected-check-running-input"
|
|
1899
|
-
name="select-checkbox-expanded-selected-check-running-input"
|
|
1900
|
-
/>
|
|
1901
|
-
<span class="pf-v6-c-check__label">Running</span>
|
|
1902
|
-
</label>
|
|
1903
|
-
<label
|
|
1904
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
1905
|
-
id="select-checkbox-expanded-selected-check-stopped"
|
|
1906
|
-
for="select-checkbox-expanded-selected-check-stopped-input"
|
|
1907
|
-
>
|
|
1908
|
-
<input
|
|
1909
|
-
class="pf-v6-c-check__input"
|
|
1910
|
-
type="checkbox"
|
|
1911
|
-
id="select-checkbox-expanded-selected-check-stopped-input"
|
|
1912
|
-
name="select-checkbox-expanded-selected-check-stopped-input"
|
|
1913
|
-
/>
|
|
1914
|
-
<span class="pf-v6-c-check__label">Stopped</span>
|
|
1915
|
-
</label>
|
|
1916
|
-
<label
|
|
1917
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
1918
|
-
id="select-checkbox-expanded-selected-check-down"
|
|
1919
|
-
for="select-checkbox-expanded-selected-check-down-input"
|
|
1920
|
-
>
|
|
1921
|
-
<input
|
|
1922
|
-
class="pf-v6-c-check__input"
|
|
1923
|
-
type="checkbox"
|
|
1924
|
-
id="select-checkbox-expanded-selected-check-down-input"
|
|
1925
|
-
name="select-checkbox-expanded-selected-check-down-input"
|
|
1926
|
-
/>
|
|
1927
|
-
<span class="pf-v6-c-check__label">Down</span>
|
|
1928
|
-
</label>
|
|
1929
|
-
<label
|
|
1930
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
1931
|
-
id="select-checkbox-expanded-selected-check-degraded"
|
|
1932
|
-
for="select-checkbox-expanded-selected-check-degraded-input"
|
|
1933
|
-
>
|
|
1934
|
-
<input
|
|
1935
|
-
class="pf-v6-c-check__input"
|
|
1936
|
-
type="checkbox"
|
|
1937
|
-
id="select-checkbox-expanded-selected-check-degraded-input"
|
|
1938
|
-
name="select-checkbox-expanded-selected-check-degraded-input"
|
|
1939
|
-
/>
|
|
1940
|
-
<span class="pf-v6-c-check__label">Degraded</span>
|
|
1941
|
-
</label>
|
|
1942
|
-
<label
|
|
1943
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
1944
|
-
id="select-checkbox-expanded-selected-check-needs-maintenance"
|
|
1945
|
-
for="select-checkbox-expanded-selected-check-needs-maintenance-input"
|
|
1946
|
-
>
|
|
1947
|
-
<input
|
|
1948
|
-
class="pf-v6-c-check__input"
|
|
1949
|
-
type="checkbox"
|
|
1950
|
-
id="select-checkbox-expanded-selected-check-needs-maintenance-input"
|
|
1951
|
-
name="select-checkbox-expanded-selected-check-needs-maintenance-input"
|
|
1952
|
-
checked
|
|
1953
|
-
/>
|
|
1954
|
-
<span class="pf-v6-c-check__label">Needs maintenance</span>
|
|
1955
|
-
</label>
|
|
1956
|
-
</fieldset>
|
|
1957
|
-
</div>
|
|
1958
|
-
<div class="pf-v6-c-select__menu-group">
|
|
1959
|
-
<div
|
|
1960
|
-
class="pf-v6-c-select__menu-group-title"
|
|
1961
|
-
aria-hidden="true"
|
|
1962
|
-
id="select-checkbox-expanded-selected-group-vendor"
|
|
1963
|
-
>Vendor</div>
|
|
1964
|
-
<fieldset
|
|
1965
|
-
class="pf-v6-c-select__menu-fieldset"
|
|
1966
|
-
aria-labelledby="select-checkbox-expanded-selected-group-vendor"
|
|
1967
|
-
>
|
|
1968
|
-
<label
|
|
1969
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
1970
|
-
id="select-checkbox-expanded-selected-check-dell"
|
|
1971
|
-
for="select-checkbox-expanded-selected-check-dell-input"
|
|
1972
|
-
>
|
|
1973
|
-
<input
|
|
1974
|
-
class="pf-v6-c-check__input"
|
|
1975
|
-
type="checkbox"
|
|
1976
|
-
id="select-checkbox-expanded-selected-check-dell-input"
|
|
1977
|
-
name="select-checkbox-expanded-selected-check-dell-input"
|
|
1978
|
-
/>
|
|
1979
|
-
<span class="pf-v6-c-check__label">Dell</span>
|
|
1980
|
-
</label>
|
|
1981
|
-
<label
|
|
1982
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
1983
|
-
id="select-checkbox-expanded-selected-check-Samsung"
|
|
1984
|
-
for="select-checkbox-expanded-selected-check-Samsung-input"
|
|
1985
|
-
>
|
|
1986
|
-
<input
|
|
1987
|
-
class="pf-v6-c-check__input"
|
|
1988
|
-
type="checkbox"
|
|
1989
|
-
id="select-checkbox-expanded-selected-check-Samsung-input"
|
|
1990
|
-
name="select-checkbox-expanded-selected-check-Samsung-input"
|
|
1991
|
-
disabled
|
|
1992
|
-
/>
|
|
1993
|
-
<span class="pf-v6-c-check__label pf-m-disabled">Samsung</span>
|
|
1994
|
-
</label>
|
|
1995
|
-
<label
|
|
1996
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
1997
|
-
id="select-checkbox-expanded-selected-check-Hp"
|
|
1998
|
-
for="select-checkbox-expanded-selected-check-Hp-input"
|
|
1999
|
-
>
|
|
2000
|
-
<input
|
|
2001
|
-
class="pf-v6-c-check__input"
|
|
2002
|
-
type="checkbox"
|
|
2003
|
-
id="select-checkbox-expanded-selected-check-Hp-input"
|
|
2004
|
-
name="select-checkbox-expanded-selected-check-Hp-input"
|
|
2005
|
-
/>
|
|
2006
|
-
<span class="pf-v6-c-check__label">Hewlett-Packard</span>
|
|
2007
|
-
</label>
|
|
2008
|
-
</fieldset>
|
|
2009
|
-
</div>
|
|
2010
|
-
</div>
|
|
2011
|
-
</div>
|
|
2012
|
-
|
|
2013
|
-
```
|
|
2014
|
-
|
|
2015
|
-
### Checkbox expanded and selected with groups and filter
|
|
2016
|
-
|
|
2017
|
-
```html
|
|
2018
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
2019
|
-
<span
|
|
2020
|
-
id="select-checkbox-expanded-selected-filter-example-label"
|
|
2021
|
-
hidden
|
|
2022
|
-
>Choose many</span>
|
|
2023
|
-
|
|
2024
|
-
<button
|
|
2025
|
-
class="pf-v6-c-select__toggle"
|
|
2026
|
-
type="button"
|
|
2027
|
-
id="select-checkbox-expanded-selected-filter-example-toggle"
|
|
2028
|
-
aria-haspopup="true"
|
|
2029
|
-
aria-expanded="true"
|
|
2030
|
-
aria-labelledby="select-checkbox-expanded-selected-filter-example-label select-checkbox-expanded-selected-filter-example-toggle"
|
|
2031
|
-
>
|
|
2032
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
2033
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
2034
|
-
</div>
|
|
2035
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
2036
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2037
|
-
</span>
|
|
2038
|
-
</button>
|
|
2039
|
-
|
|
2040
|
-
<div class="pf-v6-c-select__menu">
|
|
2041
|
-
<div class="pf-v6-c-select__menu-search">
|
|
2042
|
-
<div class="pf-v6-c-text-input-group">
|
|
2043
|
-
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
2044
|
-
<span class="pf-v6-c-text-input-group__text">
|
|
2045
|
-
<span class="pf-v6-c-text-input-group__icon">
|
|
2046
|
-
<i class="fas fa-fw fa-search"></i>
|
|
2047
|
-
</span>
|
|
2048
|
-
<input
|
|
2049
|
-
class="pf-v6-c-text-input-group__text-input"
|
|
2050
|
-
type="text"
|
|
2051
|
-
placeholder="Search"
|
|
2052
|
-
value
|
|
2053
|
-
aria-label="Search input"
|
|
2054
|
-
/>
|
|
2055
|
-
</span>
|
|
2056
|
-
</div>
|
|
2057
|
-
</div>
|
|
2058
|
-
</div>
|
|
2059
|
-
<hr class="pf-v6-c-divider" />
|
|
2060
|
-
<div class="pf-v6-c-select__menu-group">
|
|
2061
|
-
<div
|
|
2062
|
-
class="pf-v6-c-select__menu-group-title"
|
|
2063
|
-
aria-hidden="true"
|
|
2064
|
-
id="select-checkbox-expanded-selected-filter-example-group-status"
|
|
2065
|
-
>Status</div>
|
|
2066
|
-
<fieldset
|
|
2067
|
-
class="pf-v6-c-select__menu-fieldset"
|
|
2068
|
-
aria-labelledby="select-checkbox-expanded-selected-filter-example-group-status"
|
|
2069
|
-
>
|
|
2070
|
-
<label
|
|
2071
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2072
|
-
id="select-checkbox-expanded-selected-filter-example-check-running"
|
|
2073
|
-
for="select-checkbox-expanded-selected-filter-example-check-running-input"
|
|
2074
|
-
>
|
|
2075
|
-
<input
|
|
2076
|
-
class="pf-v6-c-check__input"
|
|
2077
|
-
type="checkbox"
|
|
2078
|
-
id="select-checkbox-expanded-selected-filter-example-check-running-input"
|
|
2079
|
-
name="select-checkbox-expanded-selected-filter-example-check-running-input"
|
|
2080
|
-
/>
|
|
2081
|
-
<span class="pf-v6-c-check__label">Running</span>
|
|
2082
|
-
</label>
|
|
2083
|
-
<label
|
|
2084
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2085
|
-
id="select-checkbox-expanded-selected-filter-example-check-stopped"
|
|
2086
|
-
for="select-checkbox-expanded-selected-filter-example-check-stopped-input"
|
|
2087
|
-
>
|
|
2088
|
-
<input
|
|
2089
|
-
class="pf-v6-c-check__input"
|
|
2090
|
-
type="checkbox"
|
|
2091
|
-
id="select-checkbox-expanded-selected-filter-example-check-stopped-input"
|
|
2092
|
-
name="select-checkbox-expanded-selected-filter-example-check-stopped-input"
|
|
2093
|
-
/>
|
|
2094
|
-
<span class="pf-v6-c-check__label">Stopped</span>
|
|
2095
|
-
</label>
|
|
2096
|
-
<label
|
|
2097
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2098
|
-
id="select-checkbox-expanded-selected-filter-example-check-down"
|
|
2099
|
-
for="select-checkbox-expanded-selected-filter-example-check-down-input"
|
|
2100
|
-
>
|
|
2101
|
-
<input
|
|
2102
|
-
class="pf-v6-c-check__input"
|
|
2103
|
-
type="checkbox"
|
|
2104
|
-
id="select-checkbox-expanded-selected-filter-example-check-down-input"
|
|
2105
|
-
name="select-checkbox-expanded-selected-filter-example-check-down-input"
|
|
2106
|
-
/>
|
|
2107
|
-
<span class="pf-v6-c-check__label">Down</span>
|
|
2108
|
-
</label>
|
|
2109
|
-
<label
|
|
2110
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2111
|
-
id="select-checkbox-expanded-selected-filter-example-check-degraded"
|
|
2112
|
-
for="select-checkbox-expanded-selected-filter-example-check-degraded-input"
|
|
2113
|
-
>
|
|
2114
|
-
<input
|
|
2115
|
-
class="pf-v6-c-check__input"
|
|
2116
|
-
type="checkbox"
|
|
2117
|
-
id="select-checkbox-expanded-selected-filter-example-check-degraded-input"
|
|
2118
|
-
name="select-checkbox-expanded-selected-filter-example-check-degraded-input"
|
|
2119
|
-
/>
|
|
2120
|
-
<span class="pf-v6-c-check__label">Degraded</span>
|
|
2121
|
-
</label>
|
|
2122
|
-
<label
|
|
2123
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2124
|
-
id="select-checkbox-expanded-selected-filter-example-check-needs-maintenance"
|
|
2125
|
-
for="select-checkbox-expanded-selected-filter-example-check-needs-maintenance-input"
|
|
2126
|
-
>
|
|
2127
|
-
<input
|
|
2128
|
-
class="pf-v6-c-check__input"
|
|
2129
|
-
type="checkbox"
|
|
2130
|
-
id="select-checkbox-expanded-selected-filter-example-check-needs-maintenance-input"
|
|
2131
|
-
name="select-checkbox-expanded-selected-filter-example-check-needs-maintenance-input"
|
|
2132
|
-
checked
|
|
2133
|
-
/>
|
|
2134
|
-
<span class="pf-v6-c-check__label">Needs maintenance</span>
|
|
2135
|
-
</label>
|
|
2136
|
-
</fieldset>
|
|
2137
|
-
</div>
|
|
2138
|
-
<div class="pf-v6-c-select__menu-group">
|
|
2139
|
-
<div
|
|
2140
|
-
class="pf-v6-c-select__menu-group-title"
|
|
2141
|
-
aria-hidden="true"
|
|
2142
|
-
id="select-checkbox-expanded-selected-filter-example-group-vendor"
|
|
2143
|
-
>Vendor</div>
|
|
2144
|
-
<fieldset
|
|
2145
|
-
class="pf-v6-c-select__menu-fieldset"
|
|
2146
|
-
aria-labelledby="select-checkbox-expanded-selected-filter-example-group-vendor"
|
|
2147
|
-
>
|
|
2148
|
-
<label
|
|
2149
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2150
|
-
id="select-checkbox-expanded-selected-filter-example-check-dell"
|
|
2151
|
-
for="select-checkbox-expanded-selected-filter-example-check-dell-input"
|
|
2152
|
-
>
|
|
2153
|
-
<input
|
|
2154
|
-
class="pf-v6-c-check__input"
|
|
2155
|
-
type="checkbox"
|
|
2156
|
-
id="select-checkbox-expanded-selected-filter-example-check-dell-input"
|
|
2157
|
-
name="select-checkbox-expanded-selected-filter-example-check-dell-input"
|
|
2158
|
-
/>
|
|
2159
|
-
<span class="pf-v6-c-check__label">Dell</span>
|
|
2160
|
-
</label>
|
|
2161
|
-
<label
|
|
2162
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2163
|
-
id="select-checkbox-expanded-selected-filter-example-check-Samsung"
|
|
2164
|
-
for="select-checkbox-expanded-selected-filter-example-check-Samsung-input"
|
|
2165
|
-
>
|
|
2166
|
-
<input
|
|
2167
|
-
class="pf-v6-c-check__input"
|
|
2168
|
-
type="checkbox"
|
|
2169
|
-
id="select-checkbox-expanded-selected-filter-example-check-Samsung-input"
|
|
2170
|
-
name="select-checkbox-expanded-selected-filter-example-check-Samsung-input"
|
|
2171
|
-
disabled
|
|
2172
|
-
/>
|
|
2173
|
-
<span class="pf-v6-c-check__label pf-m-disabled">Samsung</span>
|
|
2174
|
-
</label>
|
|
2175
|
-
<label
|
|
2176
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2177
|
-
id="select-checkbox-expanded-selected-filter-example-check-Hp"
|
|
2178
|
-
for="select-checkbox-expanded-selected-filter-example-check-Hp-input"
|
|
2179
|
-
>
|
|
2180
|
-
<input
|
|
2181
|
-
class="pf-v6-c-check__input"
|
|
2182
|
-
type="checkbox"
|
|
2183
|
-
id="select-checkbox-expanded-selected-filter-example-check-Hp-input"
|
|
2184
|
-
name="select-checkbox-expanded-selected-filter-example-check-Hp-input"
|
|
2185
|
-
/>
|
|
2186
|
-
<span class="pf-v6-c-check__label">Hewlett-Packard</span>
|
|
2187
|
-
</label>
|
|
2188
|
-
</fieldset>
|
|
2189
|
-
</div>
|
|
2190
|
-
</div>
|
|
2191
|
-
</div>
|
|
2192
|
-
|
|
2193
|
-
```
|
|
2194
|
-
|
|
2195
|
-
### Checkbox expanded without badge
|
|
2196
|
-
|
|
2197
|
-
```html
|
|
2198
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
2199
|
-
<span id="select-checkbox-without-badge-label" hidden>Choose many</span>
|
|
2200
|
-
|
|
2201
|
-
<button
|
|
2202
|
-
class="pf-v6-c-select__toggle"
|
|
2203
|
-
type="button"
|
|
2204
|
-
id="select-checkbox-without-badge-toggle"
|
|
2205
|
-
aria-haspopup="true"
|
|
2206
|
-
aria-expanded="true"
|
|
2207
|
-
aria-labelledby="select-checkbox-without-badge-label select-checkbox-without-badge-toggle"
|
|
2208
|
-
>
|
|
2209
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
2210
|
-
<span class="pf-v6-c-select__toggle-text">Filter</span>
|
|
2211
|
-
</div>
|
|
2212
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
2213
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2214
|
-
</span>
|
|
2215
|
-
</button>
|
|
2216
|
-
|
|
2217
|
-
<div class="pf-v6-c-select__menu">
|
|
2218
|
-
<fieldset class="pf-v6-c-select__menu-fieldset" aria-label="Select input">
|
|
2219
|
-
<label
|
|
2220
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2221
|
-
id="select-checkbox-without-badge-check-active"
|
|
2222
|
-
for="select-checkbox-without-badge-check-active-input"
|
|
2223
|
-
>
|
|
2224
|
-
<input
|
|
2225
|
-
class="pf-v6-c-check__input"
|
|
2226
|
-
type="checkbox"
|
|
2227
|
-
id="select-checkbox-without-badge-check-active-input"
|
|
2228
|
-
name="select-checkbox-without-badge-check-active-input"
|
|
2229
|
-
checked
|
|
2230
|
-
/>
|
|
2231
|
-
<span class="pf-v6-c-check__label">Active</span>
|
|
2232
|
-
</label>
|
|
2233
|
-
<label
|
|
2234
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2235
|
-
id="select-checkbox-without-badge-check-canceled"
|
|
2236
|
-
for="select-checkbox-without-badge-check-canceled-input"
|
|
2237
|
-
>
|
|
2238
|
-
<input
|
|
2239
|
-
class="pf-v6-c-check__input"
|
|
2240
|
-
type="checkbox"
|
|
2241
|
-
id="select-checkbox-without-badge-check-canceled-input"
|
|
2242
|
-
name="select-checkbox-without-badge-check-canceled-input"
|
|
2243
|
-
checked
|
|
2244
|
-
/>
|
|
2245
|
-
<span class="pf-v6-c-check__label">Canceled</span>
|
|
2246
|
-
</label>
|
|
2247
|
-
<label
|
|
2248
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2249
|
-
id="select-checkbox-without-badge-check-paused"
|
|
2250
|
-
for="select-checkbox-without-badge-check-paused-input"
|
|
2251
|
-
>
|
|
2252
|
-
<input
|
|
2253
|
-
class="pf-v6-c-check__input"
|
|
2254
|
-
type="checkbox"
|
|
2255
|
-
id="select-checkbox-without-badge-check-paused-input"
|
|
2256
|
-
name="select-checkbox-without-badge-check-paused-input"
|
|
2257
|
-
/>
|
|
2258
|
-
<span class="pf-v6-c-check__label">Paused</span>
|
|
2259
|
-
</label>
|
|
2260
|
-
<label
|
|
2261
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2262
|
-
id="select-checkbox-without-badge-check-warning"
|
|
2263
|
-
for="select-checkbox-without-badge-check-warning-input"
|
|
2264
|
-
>
|
|
2265
|
-
<input
|
|
2266
|
-
class="pf-v6-c-check__input"
|
|
2267
|
-
type="checkbox"
|
|
2268
|
-
id="select-checkbox-without-badge-check-warning-input"
|
|
2269
|
-
name="select-checkbox-without-badge-check-warning-input"
|
|
2270
|
-
checked
|
|
2271
|
-
/>
|
|
2272
|
-
<span class="pf-v6-c-check__label">Warning</span>
|
|
2273
|
-
</label>
|
|
2274
|
-
<label
|
|
2275
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2276
|
-
id="select-checkbox-without-badge-check-restarted"
|
|
2277
|
-
for="select-checkbox-without-badge-check-restarted-input"
|
|
2278
|
-
>
|
|
2279
|
-
<input
|
|
2280
|
-
class="pf-v6-c-check__input"
|
|
2281
|
-
type="checkbox"
|
|
2282
|
-
id="select-checkbox-without-badge-check-restarted-input"
|
|
2283
|
-
name="select-checkbox-without-badge-check-restarted-input"
|
|
2284
|
-
/>
|
|
2285
|
-
<span class="pf-v6-c-check__label">Restarted</span>
|
|
2286
|
-
</label>
|
|
2287
|
-
</fieldset>
|
|
2288
|
-
</div>
|
|
2289
|
-
</div>
|
|
2290
|
-
|
|
2291
|
-
```
|
|
2292
|
-
|
|
2293
|
-
### Checkbox with counts
|
|
2294
|
-
|
|
2295
|
-
```html
|
|
2296
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
2297
|
-
<span id="select-checkbox-counts-label" hidden>Choose many</span>
|
|
2298
|
-
|
|
2299
|
-
<button
|
|
2300
|
-
class="pf-v6-c-select__toggle"
|
|
2301
|
-
type="button"
|
|
2302
|
-
id="select-checkbox-counts-toggle"
|
|
2303
|
-
aria-haspopup="true"
|
|
2304
|
-
aria-expanded="true"
|
|
2305
|
-
aria-labelledby="select-checkbox-counts-label select-checkbox-counts-toggle"
|
|
2306
|
-
>
|
|
2307
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
2308
|
-
<span class="pf-v6-c-select__toggle-text">Filter</span>
|
|
2309
|
-
</div>
|
|
2310
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
2311
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2312
|
-
</span>
|
|
2313
|
-
</button>
|
|
2314
|
-
|
|
2315
|
-
<div class="pf-v6-c-select__menu">
|
|
2316
|
-
<fieldset class="pf-v6-c-select__menu-fieldset" aria-label="Select input">
|
|
2317
|
-
<label
|
|
2318
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2319
|
-
id="select-checkbox-counts-active"
|
|
2320
|
-
for="select-checkbox-counts-active-input"
|
|
2321
|
-
>
|
|
2322
|
-
<input
|
|
2323
|
-
class="pf-v6-c-check__input"
|
|
2324
|
-
type="checkbox"
|
|
2325
|
-
id="select-checkbox-counts-active-input"
|
|
2326
|
-
name="select-checkbox-counts-active-input"
|
|
2327
|
-
/>
|
|
2328
|
-
<span class="pf-v6-c-check__label">
|
|
2329
|
-
<span class="pf-v6-c-select__menu-item-row">
|
|
2330
|
-
<span class="pf-v6-c-select__menu-item-text">Active</span>
|
|
2331
|
-
<span class="pf-v6-c-select__menu-item-count">3</span>
|
|
2332
|
-
</span>
|
|
2333
|
-
</span>
|
|
2334
|
-
</label>
|
|
2335
|
-
<label
|
|
2336
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2337
|
-
id="select-checkbox-counts-canceled"
|
|
2338
|
-
for="select-checkbox-counts-canceled-input"
|
|
2339
|
-
>
|
|
2340
|
-
<input
|
|
2341
|
-
class="pf-v6-c-check__input"
|
|
2342
|
-
type="checkbox"
|
|
2343
|
-
id="select-checkbox-counts-canceled-input"
|
|
2344
|
-
name="select-checkbox-counts-canceled-input"
|
|
2345
|
-
checked
|
|
2346
|
-
/>
|
|
2347
|
-
<span class="pf-v6-c-check__label">
|
|
2348
|
-
<span class="pf-v6-c-select__menu-item-row">
|
|
2349
|
-
<span class="pf-v6-c-select__menu-item-text">Canceled</span>
|
|
2350
|
-
<span class="pf-v6-c-select__menu-item-count">1</span>
|
|
2351
|
-
</span>
|
|
2352
|
-
</span>
|
|
2353
|
-
</label>
|
|
2354
|
-
<label
|
|
2355
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2356
|
-
id="select-checkbox-counts-paused"
|
|
2357
|
-
for="select-checkbox-counts-paused-input"
|
|
2358
|
-
>
|
|
2359
|
-
<input
|
|
2360
|
-
class="pf-v6-c-check__input"
|
|
2361
|
-
type="checkbox"
|
|
2362
|
-
id="select-checkbox-counts-paused-input"
|
|
2363
|
-
name="select-checkbox-counts-paused-input"
|
|
2364
|
-
/>
|
|
2365
|
-
<span class="pf-v6-c-check__label">
|
|
2366
|
-
<span class="pf-v6-c-select__menu-item-row">
|
|
2367
|
-
<span class="pf-v6-c-select__menu-item-text">Paused</span>
|
|
2368
|
-
<span class="pf-v6-c-select__menu-item-count">15</span>
|
|
2369
|
-
</span>
|
|
2370
|
-
</span>
|
|
2371
|
-
</label>
|
|
2372
|
-
<label
|
|
2373
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2374
|
-
id="select-checkbox-counts-warning"
|
|
2375
|
-
for="select-checkbox-counts-warning-input"
|
|
2376
|
-
>
|
|
2377
|
-
<input
|
|
2378
|
-
class="pf-v6-c-check__input"
|
|
2379
|
-
type="checkbox"
|
|
2380
|
-
id="select-checkbox-counts-warning-input"
|
|
2381
|
-
name="select-checkbox-counts-warning-input"
|
|
2382
|
-
checked
|
|
2383
|
-
/>
|
|
2384
|
-
<span class="pf-v6-c-check__label">
|
|
2385
|
-
<span class="pf-v6-c-select__menu-item-row">
|
|
2386
|
-
<span class="pf-v6-c-select__menu-item-text">Warning</span>
|
|
2387
|
-
<span class="pf-v6-c-select__menu-item-count">2</span>
|
|
2388
|
-
</span>
|
|
2389
|
-
</span>
|
|
2390
|
-
</label>
|
|
2391
|
-
<label
|
|
2392
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2393
|
-
id="select-checkbox-counts-restarted"
|
|
2394
|
-
for="select-checkbox-counts-restarted-input"
|
|
2395
|
-
>
|
|
2396
|
-
<input
|
|
2397
|
-
class="pf-v6-c-check__input"
|
|
2398
|
-
type="checkbox"
|
|
2399
|
-
id="select-checkbox-counts-restarted-input"
|
|
2400
|
-
name="select-checkbox-counts-restarted-input"
|
|
2401
|
-
/>
|
|
2402
|
-
<span class="pf-v6-c-check__label">
|
|
2403
|
-
<span class="pf-v6-c-select__menu-item-row">
|
|
2404
|
-
<span class="pf-v6-c-select__menu-item-text">Restarted</span>
|
|
2405
|
-
<span class="pf-v6-c-select__menu-item-count">8</span>
|
|
2406
|
-
</span>
|
|
2407
|
-
</span>
|
|
2408
|
-
</label>
|
|
2409
|
-
</fieldset>
|
|
2410
|
-
</div>
|
|
2411
|
-
</div>
|
|
2412
|
-
|
|
2413
|
-
```
|
|
2414
|
-
|
|
2415
|
-
The checkbox select can select multiple items using checkboxes. The number of items selected is reflected in an optional badge in the dropdown toggle. The user may clear items by unchecking or using the clear button. Optionally, items may be grouped.
|
|
2416
|
-
|
|
2417
|
-
### Usage
|
|
2418
|
-
|
|
2419
|
-
| Class | Applied to | Outcome |
|
|
2420
|
-
| -- | -- | -- |
|
|
2421
|
-
| `.pf-v6-c-select` | `<div>` | Initiates the select component. |
|
|
2422
|
-
| `.pf-v6-c-select__toggle` | `<button>` | Initiates the select toggle. |
|
|
2423
|
-
| `.pf-v6-c-select__toggle-wrapper` | `<div>` | Initiates the select toggle wrapper so that chips and input field can wrap together. |
|
|
2424
|
-
| `.pf-v6-c-chip` | `<div>` | Initiates a chip. (See [chip component](/components/chip) for more details) |
|
|
2425
|
-
| `.pf-v6-c-select__toggle-typeahead` | `input.pf-v6-c-form-control` | Initiates the input field for typeahead. |
|
|
2426
|
-
| `.pf-v6-c-select__toggle-badge` | `<div>` | Initiates a container for a badge to indicate the number of items checked. \* note: This should contain an unread badge \* |
|
|
2427
|
-
| `.pf-v6-c-select__toggle-clear` | `button.pf-m-plain` | Initiates a clear button in the toggle. |
|
|
2428
|
-
| `.pf-v6-c-select__toggle-arrow` | `<span>` | Initiates the caret to toggle the dropdown. |
|
|
2429
|
-
| `.pf-v6-c-select__menu` | `<div>` | Initiates the select dropdown menu. |
|
|
2430
|
-
| `.pf-v6-c-select__menu-item` | `div.pf-v6-c-check` | Initiates the items in the select dropdown menu. |
|
|
2431
|
-
| `.pf-v6-c-select__menu-item-row` | `<span>` | Initiates a menu item row for use with positioning other elements before/after the item text. |
|
|
2432
|
-
| `.pf-v6-c-select__menu-item-text` | `<span>` | Initiates the menu item row text. |
|
|
2433
|
-
| `.pf-v6-c-select__menu-item-count` | `<span>` | Initiates the menu item row count. |
|
|
2434
|
-
| `.pf-v6-c-select__menu-fieldset` | `<fieldset>` | Initiates a fieldset for the items in a checkbox select. |
|
|
2435
|
-
| `.pf-v6-c-select__menu-group` | `<div>` | Initiates a group within a select menu. |
|
|
2436
|
-
| `.pf-v6-c-select__menu-group-title` | `<div>` | Initiates a title for a group with a select menu. |
|
|
2437
|
-
| `.pf-v6-c-select__menu-search` | `<div>` | Initiates a container for the search input group. |
|
|
2438
|
-
| `.pf-m-expanded` | `.pf-v6-c-select` | Indicates the select is expanded. |
|
|
2439
|
-
| `.pf-m-typeahead` | `.pf-v6-c-select__toggle` | Indicates the select has a typeahead. |
|
|
2440
|
-
|
|
2441
|
-
## Plain
|
|
2442
|
-
|
|
2443
|
-
### Plain toggle
|
|
2444
|
-
|
|
2445
|
-
```html
|
|
2446
|
-
<div class="pf-v6-c-select">
|
|
2447
|
-
<span id="select-plain-label" hidden>Choose one</span>
|
|
2448
|
-
|
|
2449
|
-
<button
|
|
2450
|
-
class="pf-v6-c-select__toggle pf-m-plain"
|
|
2451
|
-
type="button"
|
|
2452
|
-
id="select-plain-toggle"
|
|
2453
|
-
aria-haspopup="true"
|
|
2454
|
-
aria-expanded="false"
|
|
2455
|
-
aria-labelledby="select-plain-label select-plain-toggle"
|
|
2456
|
-
>
|
|
2457
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
2458
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
2459
|
-
</div>
|
|
2460
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
2461
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2462
|
-
</span>
|
|
2463
|
-
</button>
|
|
2464
|
-
|
|
2465
|
-
<ul
|
|
2466
|
-
class="pf-v6-c-select__menu"
|
|
2467
|
-
role="listbox"
|
|
2468
|
-
aria-labelledby="select-plain-label"
|
|
2469
|
-
hidden
|
|
2470
|
-
>
|
|
2471
|
-
<li role="presentation">
|
|
2472
|
-
<button class="pf-v6-c-select__menu-item" role="option">Running</button>
|
|
2473
|
-
</li>
|
|
2474
|
-
<li role="presentation">
|
|
2475
|
-
<button
|
|
2476
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
2477
|
-
role="option"
|
|
2478
|
-
aria-selected="true"
|
|
2479
|
-
>
|
|
2480
|
-
Stopped
|
|
2481
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
2482
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
2483
|
-
</span>
|
|
2484
|
-
</button>
|
|
2485
|
-
</li>
|
|
2486
|
-
<li role="presentation">
|
|
2487
|
-
<button class="pf-v6-c-select__menu-item" role="option">Down</button>
|
|
2488
|
-
</li>
|
|
2489
|
-
<li role="presentation">
|
|
2490
|
-
<button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
|
|
2491
|
-
</li>
|
|
2492
|
-
<li role="presentation">
|
|
2493
|
-
<button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
|
|
2494
|
-
</li>
|
|
2495
|
-
</ul>
|
|
2496
|
-
</div>
|
|
2497
|
-
|
|
2498
|
-
```
|
|
2499
|
-
|
|
2500
|
-
### Plain toggle expanded
|
|
2501
|
-
|
|
2502
|
-
```html
|
|
2503
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
2504
|
-
<span id="select-plain-expanded-label" hidden>Choose one</span>
|
|
2505
|
-
|
|
2506
|
-
<button
|
|
2507
|
-
class="pf-v6-c-select__toggle pf-m-plain"
|
|
2508
|
-
type="button"
|
|
2509
|
-
id="select-plain-expanded-toggle"
|
|
2510
|
-
aria-haspopup="true"
|
|
2511
|
-
aria-expanded="true"
|
|
2512
|
-
aria-labelledby="select-plain-expanded-label select-plain-expanded-toggle"
|
|
2513
|
-
>
|
|
2514
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
2515
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
2516
|
-
</div>
|
|
2517
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
2518
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2519
|
-
</span>
|
|
2520
|
-
</button>
|
|
2521
|
-
|
|
2522
|
-
<ul
|
|
2523
|
-
class="pf-v6-c-select__menu"
|
|
2524
|
-
role="listbox"
|
|
2525
|
-
aria-labelledby="select-plain-expanded-label"
|
|
2526
|
-
>
|
|
2527
|
-
<li role="presentation">
|
|
2528
|
-
<button class="pf-v6-c-select__menu-item" role="option">Running</button>
|
|
2529
|
-
</li>
|
|
2530
|
-
<li role="presentation">
|
|
2531
|
-
<button
|
|
2532
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
2533
|
-
role="option"
|
|
2534
|
-
aria-selected="true"
|
|
2535
|
-
>
|
|
2536
|
-
Stopped
|
|
2537
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
2538
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
2539
|
-
</span>
|
|
2540
|
-
</button>
|
|
2541
|
-
</li>
|
|
2542
|
-
<li role="presentation">
|
|
2543
|
-
<button class="pf-v6-c-select__menu-item" role="option">Down</button>
|
|
2544
|
-
</li>
|
|
2545
|
-
<li role="presentation">
|
|
2546
|
-
<button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
|
|
2547
|
-
</li>
|
|
2548
|
-
<li role="presentation">
|
|
2549
|
-
<button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
|
|
2550
|
-
</li>
|
|
2551
|
-
</ul>
|
|
2552
|
-
</div>
|
|
2553
|
-
|
|
2554
|
-
```
|
|
2555
|
-
|
|
2556
|
-
The plain select variation should be used when you do not want a border applied to the select toggle.
|
|
2557
|
-
|
|
2558
|
-
### Usage
|
|
2559
|
-
|
|
2560
|
-
| Class | Applied to | Outcome |
|
|
2561
|
-
| -- | -- | -- |
|
|
2562
|
-
| `.pf-v6-c-select` | `<div>` | Initiates the select component. |
|
|
2563
|
-
| `.pf-v6-c-select__toggle` | `<button>` | Initiates the select toggle. |
|
|
2564
|
-
| `.pf-v6-c-select__toggle-wrapper` | `<div>` | Initiates the select toggle wrapper. |
|
|
2565
|
-
| `.pf-v6-c-select__toggle-arrow` | `<span>` | Initiates the caret to toggle the dropdown. |
|
|
2566
|
-
| `.pf-v6-c-select__menu` | `<ul>` | Initiates the select dropdown menu. |
|
|
2567
|
-
| `.pf-v6-c-select__menu-item` | `<li>` | Initiates the items in the select dropdown menu. |
|
|
2568
|
-
| `.pf-v6-c-select__menu-item-icon` | `<i>` | Initiates the selected item icon. |
|
|
2569
|
-
| `.pf-m-expanded` | `.pf-v6-c-select` | Indicates the select is expanded. |
|
|
2570
|
-
| `.pf-m-plain` | `.pf-v6-c-select__toggle` | Modifies to display the toggle with no border. |
|
|
2571
|
-
| `.pf-m-selected` | `.pf-v6-c-select__menu-item` | Indicates the menu item is selected. |
|
|
2572
|
-
|
|
2573
|
-
## Icon
|
|
2574
|
-
|
|
2575
|
-
### Toggle icon
|
|
2576
|
-
|
|
2577
|
-
```html
|
|
2578
|
-
<div class="pf-v6-c-select">
|
|
2579
|
-
<span id="select-icon-label" hidden>Choose one</span>
|
|
2580
|
-
|
|
2581
|
-
<button
|
|
2582
|
-
class="pf-v6-c-select__toggle"
|
|
2583
|
-
type="button"
|
|
2584
|
-
id="select-icon-toggle"
|
|
2585
|
-
aria-haspopup="true"
|
|
2586
|
-
aria-expanded="false"
|
|
2587
|
-
aria-labelledby="select-icon-label select-icon-toggle"
|
|
2588
|
-
>
|
|
2589
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
2590
|
-
<span class="pf-v6-c-select__toggle-icon">
|
|
2591
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
2592
|
-
</span>
|
|
2593
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
2594
|
-
</div>
|
|
2595
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
2596
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2597
|
-
</span>
|
|
2598
|
-
</button>
|
|
2599
|
-
|
|
2600
|
-
<ul
|
|
2601
|
-
class="pf-v6-c-select__menu"
|
|
2602
|
-
role="listbox"
|
|
2603
|
-
aria-labelledby="select-icon-label"
|
|
2604
|
-
hidden
|
|
2605
|
-
>
|
|
2606
|
-
<li role="presentation">
|
|
2607
|
-
<button class="pf-v6-c-select__menu-item" role="option">Running</button>
|
|
2608
|
-
</li>
|
|
2609
|
-
<li role="presentation">
|
|
2610
|
-
<button
|
|
2611
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
2612
|
-
role="option"
|
|
2613
|
-
aria-selected="true"
|
|
2614
|
-
>
|
|
2615
|
-
Stopped
|
|
2616
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
2617
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
2618
|
-
</span>
|
|
2619
|
-
</button>
|
|
2620
|
-
</li>
|
|
2621
|
-
<li role="presentation">
|
|
2622
|
-
<button class="pf-v6-c-select__menu-item" role="option">Down</button>
|
|
2623
|
-
</li>
|
|
2624
|
-
<li role="presentation">
|
|
2625
|
-
<button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
|
|
2626
|
-
</li>
|
|
2627
|
-
<li role="presentation">
|
|
2628
|
-
<button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
|
|
2629
|
-
</li>
|
|
2630
|
-
</ul>
|
|
2631
|
-
</div>
|
|
2632
|
-
|
|
2633
|
-
```
|
|
2634
|
-
|
|
2635
|
-
### Accessibility
|
|
2636
|
-
|
|
2637
|
-
| Attribute | Applied to | Outcome |
|
|
2638
|
-
| -- | -- | -- |
|
|
2639
|
-
| `aria-hidden="true"` | `.pf-v6-c-select__toggle-icon` | Hides the icon from assistive technologies.
|
|
2640
|
-
|
|
2641
|
-
### Usage
|
|
2642
|
-
|
|
2643
|
-
| Class | Applied to | Outcome |
|
|
2644
|
-
| -- | -- | -- |
|
|
2645
|
-
| `.pf-v6-c-select` | `<div>` | Initiates the select component. |
|
|
2646
|
-
| `.pf-v6-c-select__toggle` | `<button>` | Initiates the select toggle. |
|
|
2647
|
-
| `.pf-v6-c-select__toggle-wrapper` | `<div>` | Initiates the select toggle wrapper. |
|
|
2648
|
-
| `.pf-v6-c-select__toggle-icon` | `<span>` | Initiates the icon in the dropdown toggle. |
|
|
2649
|
-
| `.pf-v6-c-select__toggle-arrow` | `<span>` | Initiates the caret to toggle the dropdown. |
|
|
2650
|
-
|
|
2651
|
-
## Panel
|
|
2652
|
-
|
|
2653
|
-
### Panel menu
|
|
2654
|
-
|
|
2655
|
-
```html
|
|
2656
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
2657
|
-
<span id="select-panel-label" hidden>Choose one</span>
|
|
2658
|
-
|
|
2659
|
-
<button
|
|
2660
|
-
class="pf-v6-c-select__toggle"
|
|
2661
|
-
type="button"
|
|
2662
|
-
id="select-panel-toggle"
|
|
2663
|
-
aria-haspopup="true"
|
|
2664
|
-
aria-expanded="true"
|
|
2665
|
-
aria-labelledby="select-panel-label select-panel-toggle"
|
|
2666
|
-
>
|
|
2667
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
2668
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
2669
|
-
</div>
|
|
2670
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
2671
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2672
|
-
</span>
|
|
2673
|
-
</button>
|
|
2674
|
-
|
|
2675
|
-
<div
|
|
2676
|
-
class="pf-v6-c-select__menu"
|
|
2677
|
-
aria-labelledby="select-panel-label"
|
|
2678
|
-
>[Panel contents here]</div>
|
|
2679
|
-
</div>
|
|
2680
|
-
|
|
2681
|
-
```
|
|
2682
|
-
|
|
2683
|
-
### Usage
|
|
2684
|
-
|
|
2685
|
-
| Class | Applied to | Outcome |
|
|
2686
|
-
| -- | -- | -- |
|
|
2687
|
-
| `.pf-v6-c-select` | `<div>` | Initiates the select component. |
|
|
2688
|
-
| `.pf-v6-c-select__toggle` | `<button>` | Initiates the select toggle. |
|
|
2689
|
-
| `.pf-v6-c-select__toggle-wrapper` | `<div>` | Initiates the select toggle wrapper. |
|
|
2690
|
-
| `.pf-v6-c-select__toggle-arrow` | `<span>` | Initiates the caret to toggle the dropdown. |
|
|
2691
|
-
| `.pf-v6-c-select__menu` | `<div>` | Initiates the select dropdown menu. |
|
|
2692
|
-
|
|
2693
|
-
## Description
|
|
2694
|
-
|
|
2695
|
-
### Item description
|
|
2696
|
-
|
|
2697
|
-
```html
|
|
2698
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
2699
|
-
<span id="select-with-description-label" hidden>Choose one</span>
|
|
2700
|
-
|
|
2701
|
-
<button
|
|
2702
|
-
class="pf-v6-c-select__toggle"
|
|
2703
|
-
type="button"
|
|
2704
|
-
id="select-with-description-toggle"
|
|
2705
|
-
aria-haspopup="true"
|
|
2706
|
-
aria-expanded="true"
|
|
2707
|
-
aria-labelledby="select-with-description-label select-with-description-toggle"
|
|
2708
|
-
>
|
|
2709
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
2710
|
-
<span class="pf-v6-c-select__toggle-text">Select with description</span>
|
|
2711
|
-
</div>
|
|
2712
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
2713
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2714
|
-
</span>
|
|
2715
|
-
</button>
|
|
2716
|
-
|
|
2717
|
-
<ul
|
|
2718
|
-
class="pf-v6-c-select__menu"
|
|
2719
|
-
role="listbox"
|
|
2720
|
-
aria-labelledby="select-with-description-label"
|
|
2721
|
-
>
|
|
2722
|
-
<li role="presentation">
|
|
2723
|
-
<button class="pf-v6-c-select__menu-item" role="option">Menu item</button>
|
|
2724
|
-
</li>
|
|
2725
|
-
<li role="presentation">
|
|
2726
|
-
<button class="pf-v6-c-select__menu-item pf-m-description" role="option">
|
|
2727
|
-
<span class="pf-v6-c-select__menu-item-main">Menu item description</span>
|
|
2728
|
-
<span
|
|
2729
|
-
class="pf-v6-c-select__menu-item-description"
|
|
2730
|
-
>This is a description.</span>
|
|
2731
|
-
</button>
|
|
2732
|
-
</li>
|
|
2733
|
-
<li role="presentation">
|
|
2734
|
-
<button
|
|
2735
|
-
class="pf-v6-c-select__menu-item pf-m-description"
|
|
2736
|
-
role="option"
|
|
2737
|
-
disabled
|
|
2738
|
-
>
|
|
2739
|
-
<span class="pf-v6-c-select__menu-item-main">
|
|
2740
|
-
<span
|
|
2741
|
-
class="pf-v6-c-select__menu-item-main"
|
|
2742
|
-
>Menu item description disabled</span>
|
|
2743
|
-
</span>
|
|
2744
|
-
<span
|
|
2745
|
-
class="pf-v6-c-select__menu-item-description"
|
|
2746
|
-
>This is a description.</span>
|
|
2747
|
-
</button>
|
|
2748
|
-
</li>
|
|
2749
|
-
<li role="presentation">
|
|
2750
|
-
<button
|
|
2751
|
-
class="pf-v6-c-select__menu-item pf-m-selected pf-m-description"
|
|
2752
|
-
role="option"
|
|
2753
|
-
aria-selected="true"
|
|
2754
|
-
>
|
|
2755
|
-
<span class="pf-v6-c-select__menu-item-main">
|
|
2756
|
-
Menu item description selected
|
|
2757
|
-
<span
|
|
2758
|
-
class="pf-v6-c-select__menu-item-icon"
|
|
2759
|
-
>
|
|
2760
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
2761
|
-
</span>
|
|
2762
|
-
</span>
|
|
2763
|
-
<span
|
|
2764
|
-
class="pf-v6-c-select__menu-item-description"
|
|
2765
|
-
>This is a description.</span>
|
|
2766
|
-
</button>
|
|
2767
|
-
</li>
|
|
2768
|
-
<li role="presentation">
|
|
2769
|
-
<button class="pf-v6-c-select__menu-item pf-m-description" role="option">
|
|
2770
|
-
<span class="pf-v6-c-select__menu-item-main">Menu item long description</span>
|
|
2771
|
-
<span
|
|
2772
|
-
class="pf-v6-c-select__menu-item-description"
|
|
2773
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
2774
|
-
</button>
|
|
2775
|
-
</li>
|
|
2776
|
-
</ul>
|
|
2777
|
-
</div>
|
|
2778
|
-
|
|
2779
|
-
```
|
|
2780
|
-
|
|
2781
|
-
### Checkbox item description
|
|
2782
|
-
|
|
2783
|
-
```html
|
|
2784
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
2785
|
-
<span id="select-checkbox-description-label" hidden>Choose many</span>
|
|
2786
|
-
|
|
2787
|
-
<button
|
|
2788
|
-
class="pf-v6-c-select__toggle"
|
|
2789
|
-
type="button"
|
|
2790
|
-
id="select-checkbox-description-toggle"
|
|
2791
|
-
aria-haspopup="true"
|
|
2792
|
-
aria-expanded="true"
|
|
2793
|
-
aria-labelledby="select-checkbox-description-label select-checkbox-description-toggle"
|
|
2794
|
-
>
|
|
2795
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
2796
|
-
<span class="pf-v6-c-select__toggle-text">Filter</span>
|
|
2797
|
-
</div>
|
|
2798
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
2799
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2800
|
-
</span>
|
|
2801
|
-
</button>
|
|
2802
|
-
|
|
2803
|
-
<div class="pf-v6-c-select__menu">
|
|
2804
|
-
<fieldset class="pf-v6-c-select__menu-fieldset" aria-label="Select input">
|
|
2805
|
-
<label
|
|
2806
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item pf-m-description"
|
|
2807
|
-
id="select-checkbox-description-active"
|
|
2808
|
-
for="select-checkbox-description-active-input"
|
|
2809
|
-
>
|
|
2810
|
-
<input
|
|
2811
|
-
class="pf-v6-c-check__input"
|
|
2812
|
-
type="checkbox"
|
|
2813
|
-
aria-describedby="select-checkbox-description-active-description"
|
|
2814
|
-
id="select-checkbox-description-active-input"
|
|
2815
|
-
name="select-checkbox-description-active-input"
|
|
2816
|
-
/>
|
|
2817
|
-
<span class="pf-v6-c-check__label">Active</span>
|
|
2818
|
-
<span
|
|
2819
|
-
class="pf-v6-c-check__description"
|
|
2820
|
-
id="select-checkbox-description-active-description"
|
|
2821
|
-
>This is a description</span>
|
|
2822
|
-
</label>
|
|
2823
|
-
<label
|
|
2824
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item pf-m-description"
|
|
2825
|
-
id="select-checkbox-description-canceled"
|
|
2826
|
-
for="select-checkbox-description-canceled-input"
|
|
2827
|
-
>
|
|
2828
|
-
<input
|
|
2829
|
-
class="pf-v6-c-check__input"
|
|
2830
|
-
type="checkbox"
|
|
2831
|
-
aria-describedby="select-checkbox-description-canceled-description"
|
|
2832
|
-
id="select-checkbox-description-canceled-input"
|
|
2833
|
-
name="select-checkbox-description-canceled-input"
|
|
2834
|
-
/>
|
|
2835
|
-
<span class="pf-v6-c-check__label">Canceled</span>
|
|
2836
|
-
<span
|
|
2837
|
-
class="pf-v6-c-check__description"
|
|
2838
|
-
id="select-checkbox-description-canceled-description"
|
|
2839
|
-
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
2840
|
-
</label>
|
|
2841
|
-
<label
|
|
2842
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2843
|
-
id="select-checkbox-description-paused"
|
|
2844
|
-
for="select-checkbox-description-paused-input"
|
|
2845
|
-
>
|
|
2846
|
-
<input
|
|
2847
|
-
class="pf-v6-c-check__input"
|
|
2848
|
-
type="checkbox"
|
|
2849
|
-
id="select-checkbox-description-paused-input"
|
|
2850
|
-
name="select-checkbox-description-paused-input"
|
|
2851
|
-
/>
|
|
2852
|
-
<span class="pf-v6-c-check__label">Paused</span>
|
|
2853
|
-
</label>
|
|
2854
|
-
<label
|
|
2855
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2856
|
-
id="select-checkbox-description-warning"
|
|
2857
|
-
for="select-checkbox-description-warning-input"
|
|
2858
|
-
>
|
|
2859
|
-
<input
|
|
2860
|
-
class="pf-v6-c-check__input"
|
|
2861
|
-
type="checkbox"
|
|
2862
|
-
id="select-checkbox-description-warning-input"
|
|
2863
|
-
name="select-checkbox-description-warning-input"
|
|
2864
|
-
/>
|
|
2865
|
-
<span class="pf-v6-c-check__label">Warning</span>
|
|
2866
|
-
</label>
|
|
2867
|
-
<label
|
|
2868
|
-
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
2869
|
-
id="select-checkbox-description-restarted"
|
|
2870
|
-
for="select-checkbox-description-restarted-input"
|
|
2871
|
-
>
|
|
2872
|
-
<input
|
|
2873
|
-
class="pf-v6-c-check__input"
|
|
2874
|
-
type="checkbox"
|
|
2875
|
-
id="select-checkbox-description-restarted-input"
|
|
2876
|
-
name="select-checkbox-description-restarted-input"
|
|
2877
|
-
/>
|
|
2878
|
-
<span class="pf-v6-c-check__label">Restarted</span>
|
|
2879
|
-
</label>
|
|
2880
|
-
</fieldset>
|
|
2881
|
-
</div>
|
|
2882
|
-
</div>
|
|
2883
|
-
|
|
2884
|
-
```
|
|
2885
|
-
|
|
2886
|
-
### Usage
|
|
2887
|
-
|
|
2888
|
-
| Class | Applied to | Outcome |
|
|
2889
|
-
| -- | -- | -- |
|
|
2890
|
-
| `.pf-v6-c-select__menu-item-description` | `<span>` | Initiates the select menu item description element. |
|
|
2891
|
-
| `.pf-v6-c-select__menu-item-main` | `<span>` | Initiates the select menu item main element. Used when the description element is present. |
|
|
2892
|
-
| `.pf-m-description` | `.pf-v6-c-select__menu-item` | Modifies the select menu item when selected to accommodate the description element. |
|
|
2893
|
-
|
|
2894
|
-
## Favorites
|
|
2895
|
-
|
|
2896
|
-
### Menu item favorites
|
|
2897
|
-
|
|
2898
|
-
```html
|
|
2899
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
2900
|
-
<span id="select-favorites-label" hidden>Choose one</span>
|
|
2901
|
-
|
|
2902
|
-
<button
|
|
2903
|
-
class="pf-v6-c-select__toggle"
|
|
2904
|
-
type="button"
|
|
2905
|
-
id="select-favorites-toggle"
|
|
2906
|
-
aria-haspopup="true"
|
|
2907
|
-
aria-expanded="true"
|
|
2908
|
-
aria-labelledby="select-favorites-label select-favorites-toggle"
|
|
2909
|
-
>
|
|
2910
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
2911
|
-
<span class="pf-v6-c-select__toggle-text">Favorites</span>
|
|
2912
|
-
</div>
|
|
2913
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
2914
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2915
|
-
</span>
|
|
2916
|
-
</button>
|
|
2917
|
-
|
|
2918
|
-
<div class="pf-v6-c-select__menu" aria-labelledby="select-favorites-label">
|
|
2919
|
-
<div class="pf-v6-c-select__menu-search">
|
|
2920
|
-
<div class="pf-v6-c-text-input-group">
|
|
2921
|
-
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
2922
|
-
<span class="pf-v6-c-text-input-group__text">
|
|
2923
|
-
<span class="pf-v6-c-text-input-group__icon">
|
|
2924
|
-
<i class="fas fa-fw fa-search"></i>
|
|
2925
|
-
</span>
|
|
2926
|
-
<input
|
|
2927
|
-
class="pf-v6-c-text-input-group__text-input"
|
|
2928
|
-
type="text"
|
|
2929
|
-
placeholder="Search"
|
|
2930
|
-
value
|
|
2931
|
-
aria-label="Search input"
|
|
2932
|
-
/>
|
|
2933
|
-
</span>
|
|
2934
|
-
</div>
|
|
2935
|
-
</div>
|
|
2936
|
-
</div>
|
|
2937
|
-
<hr class="pf-v6-c-divider" />
|
|
2938
|
-
<div class="pf-v6-c-select__menu-group">
|
|
2939
|
-
<div
|
|
2940
|
-
class="pf-v6-c-select__menu-group-title"
|
|
2941
|
-
aria-hidden="true"
|
|
2942
|
-
id="select-favorites-group-title-1"
|
|
2943
|
-
>Favorites</div>
|
|
2944
|
-
<ul role="listbox" aria-labelledby="select-favorites-group-title-1">
|
|
2945
|
-
<li
|
|
2946
|
-
class="pf-v6-c-select__menu-wrapper pf-m-favorite"
|
|
2947
|
-
role="presentation"
|
|
2948
|
-
>
|
|
2949
|
-
<button
|
|
2950
|
-
class="pf-v6-c-select__menu-item pf-m-link pf-m-description"
|
|
2951
|
-
role="option"
|
|
2952
|
-
>
|
|
2953
|
-
<span class="pf-v6-c-select__menu-item-main">Item 1</span>
|
|
2954
|
-
<span
|
|
2955
|
-
class="pf-v6-c-select__menu-item-description"
|
|
2956
|
-
>This is a description.</span>
|
|
2957
|
-
</button>
|
|
2958
|
-
<button
|
|
2959
|
-
class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
|
|
2960
|
-
role="option"
|
|
2961
|
-
aria-label="Starred"
|
|
2962
|
-
>
|
|
2963
|
-
<span class="pf-v6-c-select__menu-item-action-icon">
|
|
2964
|
-
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2965
|
-
</span>
|
|
2966
|
-
</button>
|
|
2967
|
-
</li>
|
|
2968
|
-
<li
|
|
2969
|
-
class="pf-v6-c-select__menu-wrapper pf-m-favorite"
|
|
2970
|
-
role="presentation"
|
|
2971
|
-
>
|
|
2972
|
-
<button
|
|
2973
|
-
class="pf-v6-c-select__menu-item pf-m-link"
|
|
2974
|
-
role="option"
|
|
2975
|
-
>Item 4</button>
|
|
2976
|
-
<button
|
|
2977
|
-
class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
|
|
2978
|
-
role="option"
|
|
2979
|
-
aria-label="Starred"
|
|
2980
|
-
>
|
|
2981
|
-
<span class="pf-v6-c-select__menu-item-action-icon">
|
|
2982
|
-
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2983
|
-
</span>
|
|
2984
|
-
</button>
|
|
2985
|
-
</li>
|
|
2986
|
-
</ul>
|
|
2987
|
-
</div>
|
|
2988
|
-
<hr class="pf-v6-c-divider" />
|
|
2989
|
-
<div class="pf-v6-c-select__menu-group">
|
|
2990
|
-
<div
|
|
2991
|
-
class="pf-v6-c-select__menu-group-title"
|
|
2992
|
-
aria-hidden="true"
|
|
2993
|
-
id="select-favorites-group-title-2"
|
|
2994
|
-
>Group 1</div>
|
|
2995
|
-
<ul role="listbox" aria-labelledby="select-favorites-group-title-2">
|
|
2996
|
-
<li
|
|
2997
|
-
class="pf-v6-c-select__menu-wrapper pf-m-favorite"
|
|
2998
|
-
role="presentation"
|
|
2999
|
-
>
|
|
3000
|
-
<button
|
|
3001
|
-
class="pf-v6-c-select__menu-item pf-m-link pf-m-description"
|
|
3002
|
-
role="option"
|
|
3003
|
-
>
|
|
3004
|
-
<span class="pf-v6-c-select__menu-item-main">Item 1</span>
|
|
3005
|
-
<span
|
|
3006
|
-
class="pf-v6-c-select__menu-item-description"
|
|
3007
|
-
>This is a description.</span>
|
|
3008
|
-
</button>
|
|
3009
|
-
<button
|
|
3010
|
-
class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
|
|
3011
|
-
role="option"
|
|
3012
|
-
aria-label="Starred"
|
|
3013
|
-
>
|
|
3014
|
-
<span class="pf-v6-c-select__menu-item-action-icon">
|
|
3015
|
-
<i class="fas fa-star" aria-hidden="true"></i>
|
|
3016
|
-
</span>
|
|
3017
|
-
</button>
|
|
3018
|
-
</li>
|
|
3019
|
-
<li class="pf-v6-c-select__menu-wrapper" role="presentation">
|
|
3020
|
-
<button
|
|
3021
|
-
class="pf-v6-c-select__menu-item pf-m-selected pf-m-link"
|
|
3022
|
-
role="option"
|
|
3023
|
-
aria-selected="true"
|
|
3024
|
-
>
|
|
3025
|
-
Item 2
|
|
3026
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
3027
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
3028
|
-
</span>
|
|
3029
|
-
</button>
|
|
3030
|
-
<button
|
|
3031
|
-
class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
|
|
3032
|
-
role="option"
|
|
3033
|
-
aria-label="Not starred"
|
|
3034
|
-
>
|
|
3035
|
-
<span class="pf-v6-c-select__menu-item-action-icon">
|
|
3036
|
-
<i class="fas fa-star" aria-hidden="true"></i>
|
|
3037
|
-
</span>
|
|
3038
|
-
</button>
|
|
3039
|
-
</li>
|
|
3040
|
-
<li
|
|
3041
|
-
class="pf-v6-c-select__menu-wrapper pf-m-disabled"
|
|
3042
|
-
role="presentation"
|
|
3043
|
-
>
|
|
3044
|
-
<button
|
|
3045
|
-
class="pf-v6-c-select__menu-item pf-m-link"
|
|
3046
|
-
role="option"
|
|
3047
|
-
disabled
|
|
3048
|
-
>Item 3 (disabled)</button>
|
|
3049
|
-
<button
|
|
3050
|
-
class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
|
|
3051
|
-
role="option"
|
|
3052
|
-
disabled
|
|
3053
|
-
aria-label="Not starred"
|
|
3054
|
-
>
|
|
3055
|
-
<span class="pf-v6-c-select__menu-item-action-icon">
|
|
3056
|
-
<i class="fas fa-star" aria-hidden="true"></i>
|
|
3057
|
-
</span>
|
|
3058
|
-
</button>
|
|
3059
|
-
</li>
|
|
3060
|
-
</ul>
|
|
3061
|
-
</div>
|
|
3062
|
-
<hr class="pf-v6-c-divider" />
|
|
3063
|
-
<div class="pf-v6-c-select__menu-group">
|
|
3064
|
-
<div
|
|
3065
|
-
class="pf-v6-c-select__menu-group-title"
|
|
3066
|
-
aria-hidden="true"
|
|
3067
|
-
id="select-favorites-group-title-3"
|
|
3068
|
-
>Group 2</div>
|
|
3069
|
-
<ul role="listbox" aria-labelledby="select-favorites-group-title-3">
|
|
3070
|
-
<li
|
|
3071
|
-
class="pf-v6-c-select__menu-wrapper pf-m-favorite"
|
|
3072
|
-
role="presentation"
|
|
3073
|
-
>
|
|
3074
|
-
<button
|
|
3075
|
-
class="pf-v6-c-select__menu-item pf-m-link"
|
|
3076
|
-
role="option"
|
|
3077
|
-
>Item 4</button>
|
|
3078
|
-
<button
|
|
3079
|
-
class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
|
|
3080
|
-
role="option"
|
|
3081
|
-
aria-label="Starred"
|
|
3082
|
-
>
|
|
3083
|
-
<span class="pf-v6-c-select__menu-item-action-icon">
|
|
3084
|
-
<i class="fas fa-star" aria-hidden="true"></i>
|
|
3085
|
-
</span>
|
|
3086
|
-
</button>
|
|
3087
|
-
</li>
|
|
3088
|
-
<li class="pf-v6-c-select__menu-wrapper" role="presentation">
|
|
3089
|
-
<button
|
|
3090
|
-
class="pf-v6-c-select__menu-item pf-m-link pf-m-description"
|
|
3091
|
-
role="option"
|
|
3092
|
-
>
|
|
3093
|
-
<span class="pf-v6-c-select__menu-item-main">Item 5</span>
|
|
3094
|
-
<span
|
|
3095
|
-
class="pf-v6-c-select__menu-item-description"
|
|
3096
|
-
>This is a description.</span>
|
|
3097
|
-
</button>
|
|
3098
|
-
<button
|
|
3099
|
-
class="pf-v6-c-select__menu-item pf-m-action pf-m-favorite-action"
|
|
3100
|
-
role="option"
|
|
3101
|
-
aria-label="Not starred"
|
|
3102
|
-
>
|
|
3103
|
-
<span class="pf-v6-c-select__menu-item-action-icon">
|
|
3104
|
-
<i class="fas fa-star" aria-hidden="true"></i>
|
|
3105
|
-
</span>
|
|
3106
|
-
</button>
|
|
3107
|
-
</li>
|
|
3108
|
-
</ul>
|
|
3109
|
-
</div>
|
|
3110
|
-
</div>
|
|
3111
|
-
</div>
|
|
3112
|
-
|
|
3113
|
-
```
|
|
3114
|
-
|
|
3115
|
-
### Accessibility
|
|
3116
|
-
|
|
3117
|
-
| Attribute | Applied to | Outcome |
|
|
3118
|
-
| -- | -- | -- |
|
|
3119
|
-
| `aria-label="Not starred"` | `.pf-v6-c-select__menu-wrapper > .pf-v6-c-select__menu-item.pf-m-action` | Provides an accessible label indicating that the favorite action is not selected. |
|
|
3120
|
-
| `aria-label="Starred"` | `.pf-v6-c-select__menu-wrapper.pf-m-favorite > .pf-v6-c-select__menu-item.pf-m-action` | Provides an accessible label indicating that the favorite action is selected. |
|
|
3121
|
-
|
|
3122
|
-
### Usage
|
|
3123
|
-
|
|
3124
|
-
| Class | Applied to | Outcome |
|
|
3125
|
-
| -- | -- | -- |
|
|
3126
|
-
| `.pf-v6-c-select__menu-wrapper` | `<li>` | Defines a menu wrapper for use with multiple actionable items in a single item row. |
|
|
3127
|
-
| `.pf-m-favorite` | `.pf-v6-c-select__menu-wrapper` | Modifies wrapper to indicate that the item row has been favorited. |
|
|
3128
|
-
| `.pf-m-favorite-action` | `.pf-v6-c-select__menu-item` | Modifies an item for favorite styles. |
|
|
3129
|
-
| `.pf-m-link` | `.pf-v6-c-select__menu-item.pf-m-wrapper > .pf-v6-c-select__menu-item` | Modifies item for link styles. |
|
|
3130
|
-
| `.pf-m-action` | `.pf-v6-c-select__menu-item.pf-m-wrapper > .pf-v6-c-select__menu-item` | Modifies item to for action styles. |
|
|
3131
|
-
|
|
3132
|
-
## View more
|
|
3133
|
-
|
|
3134
|
-
### View more menu item
|
|
3135
|
-
|
|
3136
|
-
```html
|
|
3137
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
3138
|
-
<span id="select-single-view-more-label" hidden>Choose one</span>
|
|
3139
|
-
|
|
3140
|
-
<button
|
|
3141
|
-
class="pf-v6-c-select__toggle"
|
|
3142
|
-
type="button"
|
|
3143
|
-
id="select-single-view-more-toggle"
|
|
3144
|
-
aria-haspopup="true"
|
|
3145
|
-
aria-expanded="true"
|
|
3146
|
-
aria-labelledby="select-single-view-more-label select-single-view-more-toggle"
|
|
3147
|
-
>
|
|
3148
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
3149
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
3150
|
-
</div>
|
|
3151
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
3152
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3153
|
-
</span>
|
|
3154
|
-
</button>
|
|
3155
|
-
|
|
3156
|
-
<ul
|
|
3157
|
-
class="pf-v6-c-select__menu"
|
|
3158
|
-
role="listbox"
|
|
3159
|
-
aria-labelledby="select-single-view-more-label"
|
|
3160
|
-
>
|
|
3161
|
-
<li role="presentation">
|
|
3162
|
-
<button class="pf-v6-c-select__menu-item" role="option">Running</button>
|
|
3163
|
-
</li>
|
|
3164
|
-
<li role="presentation">
|
|
3165
|
-
<button
|
|
3166
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
3167
|
-
role="option"
|
|
3168
|
-
aria-selected="true"
|
|
3169
|
-
>
|
|
3170
|
-
Stopped
|
|
3171
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
3172
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
3173
|
-
</span>
|
|
3174
|
-
</button>
|
|
3175
|
-
</li>
|
|
3176
|
-
<li role="presentation">
|
|
3177
|
-
<button class="pf-v6-c-select__menu-item" role="option">Down</button>
|
|
3178
|
-
</li>
|
|
3179
|
-
<li role="presentation">
|
|
3180
|
-
<button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
|
|
3181
|
-
</li>
|
|
3182
|
-
<li role="presentation">
|
|
3183
|
-
<button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
|
|
3184
|
-
</li>
|
|
3185
|
-
<li role="presentation">
|
|
3186
|
-
<button
|
|
3187
|
-
class="pf-v6-c-select__menu-item pf-m-load"
|
|
3188
|
-
role="option"
|
|
3189
|
-
>View more</button>
|
|
3190
|
-
</li>
|
|
3191
|
-
</ul>
|
|
3192
|
-
</div>
|
|
3193
|
-
|
|
3194
|
-
```
|
|
3195
|
-
|
|
3196
|
-
### Usage
|
|
3197
|
-
|
|
3198
|
-
| Class | Applied to | Outcome |
|
|
3199
|
-
| -- | -- | -- |
|
|
3200
|
-
| `.pf-m-load` | `.pf-v6-c-select__menu-item` | Modifies a menu item for load styles. |
|
|
3201
|
-
|
|
3202
|
-
## Loading
|
|
3203
|
-
|
|
3204
|
-
### Loading menu item
|
|
3205
|
-
|
|
3206
|
-
```html
|
|
3207
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
3208
|
-
<span id="select-single-loading-label" hidden>Choose one</span>
|
|
3209
|
-
|
|
3210
|
-
<button
|
|
3211
|
-
class="pf-v6-c-select__toggle"
|
|
3212
|
-
type="button"
|
|
3213
|
-
id="select-single-loading-toggle"
|
|
3214
|
-
aria-haspopup="true"
|
|
3215
|
-
aria-expanded="true"
|
|
3216
|
-
aria-labelledby="select-single-loading-label select-single-loading-toggle"
|
|
3217
|
-
>
|
|
3218
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
3219
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
3220
|
-
</div>
|
|
3221
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
3222
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3223
|
-
</span>
|
|
3224
|
-
</button>
|
|
3225
|
-
|
|
3226
|
-
<ul
|
|
3227
|
-
class="pf-v6-c-select__menu"
|
|
3228
|
-
role="listbox"
|
|
3229
|
-
aria-labelledby="select-single-loading-label"
|
|
3230
|
-
>
|
|
3231
|
-
<li role="presentation">
|
|
3232
|
-
<button class="pf-v6-c-select__menu-item" role="option">Running</button>
|
|
3233
|
-
</li>
|
|
3234
|
-
<li role="presentation">
|
|
3235
|
-
<button
|
|
3236
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
3237
|
-
role="option"
|
|
3238
|
-
aria-selected="true"
|
|
3239
|
-
>
|
|
3240
|
-
Stopped
|
|
3241
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
3242
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
3243
|
-
</span>
|
|
3244
|
-
</button>
|
|
3245
|
-
</li>
|
|
3246
|
-
<li role="presentation">
|
|
3247
|
-
<button class="pf-v6-c-select__menu-item" role="option">Down</button>
|
|
3248
|
-
</li>
|
|
3249
|
-
<li role="presentation">
|
|
3250
|
-
<button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
|
|
3251
|
-
</li>
|
|
3252
|
-
<li role="presentation">
|
|
3253
|
-
<button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
|
|
3254
|
-
</li>
|
|
3255
|
-
<li role="presentation" class="pf-v6-c-select__list-item pf-m-loading">
|
|
3256
|
-
<button class="pf-v6-c-select__menu-item" role="option">
|
|
3257
|
-
<svg
|
|
3258
|
-
class="pf-v6-c-spinner pf-m-lg"
|
|
3259
|
-
role="progressbar"
|
|
3260
|
-
viewBox="0 0 100 100"
|
|
3261
|
-
aria-label="Loading items"
|
|
3262
|
-
>
|
|
3263
|
-
<circle
|
|
3264
|
-
class="pf-v6-c-spinner__path"
|
|
3265
|
-
cx="50"
|
|
3266
|
-
cy="50"
|
|
3267
|
-
r="45"
|
|
3268
|
-
fill="none"
|
|
3269
|
-
/>
|
|
3270
|
-
</svg>
|
|
3271
|
-
</button>
|
|
3272
|
-
</li>
|
|
3273
|
-
</ul>
|
|
3274
|
-
</div>
|
|
3275
|
-
|
|
3276
|
-
```
|
|
3277
|
-
|
|
3278
|
-
### Usage
|
|
3279
|
-
|
|
3280
|
-
| Class | Applied to | Outcome |
|
|
3281
|
-
| -- | -- | -- |
|
|
3282
|
-
| `.pf-v6-c-select__list-item` | `<li>` | Defines a list item element in the select menu. |
|
|
3283
|
-
| `.pf-m-loading` | `.pf-v6-c-select__list-item` | Modifies a list item for loading styles. |
|
|
3284
|
-
|
|
3285
|
-
## Footer
|
|
3286
|
-
|
|
3287
|
-
### Menu footer
|
|
3288
|
-
|
|
3289
|
-
```html
|
|
3290
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
3291
|
-
<span id="select-single-footer-label" hidden>Choose one</span>
|
|
3292
|
-
|
|
3293
|
-
<button
|
|
3294
|
-
class="pf-v6-c-select__toggle"
|
|
3295
|
-
type="button"
|
|
3296
|
-
id="select-single-footer-toggle"
|
|
3297
|
-
aria-haspopup="true"
|
|
3298
|
-
aria-expanded="true"
|
|
3299
|
-
aria-labelledby="select-single-footer-label select-single-footer-toggle"
|
|
3300
|
-
>
|
|
3301
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
3302
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
3303
|
-
</div>
|
|
3304
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
3305
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3306
|
-
</span>
|
|
3307
|
-
</button>
|
|
3308
|
-
|
|
3309
|
-
<div class="pf-v6-c-select__menu">
|
|
3310
|
-
<ul
|
|
3311
|
-
class="pf-v6-c-select__menu-list"
|
|
3312
|
-
role="listbox"
|
|
3313
|
-
aria-labelledby="select-single-footer-label"
|
|
3314
|
-
>
|
|
3315
|
-
<li role="presentation">
|
|
3316
|
-
<button class="pf-v6-c-select__menu-item" role="option">Running</button>
|
|
3317
|
-
</li>
|
|
3318
|
-
<li role="presentation">
|
|
3319
|
-
<button
|
|
3320
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
3321
|
-
role="option"
|
|
3322
|
-
aria-selected="true"
|
|
3323
|
-
>
|
|
3324
|
-
Stopped
|
|
3325
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
3326
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
3327
|
-
</span>
|
|
3328
|
-
</button>
|
|
3329
|
-
</li>
|
|
3330
|
-
<li role="presentation">
|
|
3331
|
-
<button class="pf-v6-c-select__menu-item" role="option">Down</button>
|
|
3332
|
-
</li>
|
|
3333
|
-
<li role="presentation">
|
|
3334
|
-
<button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
|
|
3335
|
-
</li>
|
|
3336
|
-
<li role="presentation">
|
|
3337
|
-
<button
|
|
3338
|
-
class="pf-v6-c-select__menu-item"
|
|
3339
|
-
role="option"
|
|
3340
|
-
>Needs maintenance</button>
|
|
3341
|
-
</li>
|
|
3342
|
-
</ul>
|
|
3343
|
-
<div class="pf-v6-c-select__menu-footer">
|
|
3344
|
-
<button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
|
|
3345
|
-
<span class="pf-v6-c-button__text">Action</span>
|
|
3346
|
-
</button>
|
|
3347
|
-
</div>
|
|
3348
|
-
</div>
|
|
3349
|
-
</div>
|
|
3350
|
-
|
|
3351
|
-
```
|
|
3352
|
-
|
|
3353
|
-
### Usage
|
|
3354
|
-
|
|
3355
|
-
| Class | Applied to | Outcome |
|
|
3356
|
-
| -- | -- | -- |
|
|
3357
|
-
| `.pf-v6-c-select__menu-footer` | `<div>` | Defines a menu footer. |
|
|
3358
|
-
| `.pf-v6-c-select__menu-list` | `<ul>` | Defines the menu list when the list is placed in `div.pf-v6-c-select__menu`. |
|
|
3359
|
-
|
|
3360
|
-
## Placeholder
|
|
3361
|
-
|
|
3362
|
-
### Placeholder collapsed
|
|
3363
|
-
|
|
3364
|
-
```html
|
|
3365
|
-
<div class="pf-v6-c-select">
|
|
3366
|
-
<span id="select-placeholder-collapsed-label" hidden>Choose one</span>
|
|
3367
|
-
|
|
3368
|
-
<button
|
|
3369
|
-
class="pf-v6-c-select__toggle pf-m-placeholder"
|
|
3370
|
-
type="button"
|
|
3371
|
-
id="select-placeholder-collapsed-toggle"
|
|
3372
|
-
aria-haspopup="true"
|
|
3373
|
-
aria-expanded="false"
|
|
3374
|
-
aria-labelledby="select-placeholder-collapsed-label select-placeholder-collapsed-toggle"
|
|
3375
|
-
>
|
|
3376
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
3377
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
3378
|
-
</div>
|
|
3379
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
3380
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3381
|
-
</span>
|
|
3382
|
-
</button>
|
|
3383
|
-
|
|
3384
|
-
<ul
|
|
3385
|
-
class="pf-v6-c-select__menu"
|
|
3386
|
-
role="listbox"
|
|
3387
|
-
aria-labelledby="select-placeholder-collapsed-label"
|
|
3388
|
-
hidden
|
|
3389
|
-
>
|
|
3390
|
-
<li role="presentation">
|
|
3391
|
-
<button class="pf-v6-c-select__menu-item" role="option">Running</button>
|
|
3392
|
-
</li>
|
|
3393
|
-
<li role="presentation">
|
|
3394
|
-
<button
|
|
3395
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
3396
|
-
role="option"
|
|
3397
|
-
aria-selected="true"
|
|
3398
|
-
>
|
|
3399
|
-
Stopped
|
|
3400
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
3401
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
3402
|
-
</span>
|
|
3403
|
-
</button>
|
|
3404
|
-
</li>
|
|
3405
|
-
<li role="presentation">
|
|
3406
|
-
<button class="pf-v6-c-select__menu-item" role="option">Down</button>
|
|
3407
|
-
</li>
|
|
3408
|
-
<li role="presentation">
|
|
3409
|
-
<button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
|
|
3410
|
-
</li>
|
|
3411
|
-
<li role="presentation">
|
|
3412
|
-
<button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
|
|
3413
|
-
</li>
|
|
3414
|
-
</ul>
|
|
3415
|
-
</div>
|
|
3416
|
-
|
|
3417
|
-
```
|
|
3418
|
-
|
|
3419
|
-
### Placeholder expanded
|
|
3420
|
-
|
|
3421
|
-
```html
|
|
3422
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
3423
|
-
<span id="select-placeholder-expanded-label" hidden>Choose one</span>
|
|
3424
|
-
|
|
3425
|
-
<button
|
|
3426
|
-
class="pf-v6-c-select__toggle pf-m-placeholder"
|
|
3427
|
-
type="button"
|
|
3428
|
-
id="select-placeholder-expanded-toggle"
|
|
3429
|
-
aria-haspopup="true"
|
|
3430
|
-
aria-expanded="true"
|
|
3431
|
-
aria-labelledby="select-placeholder-expanded-label select-placeholder-expanded-toggle"
|
|
3432
|
-
>
|
|
3433
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
3434
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
3435
|
-
</div>
|
|
3436
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
3437
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3438
|
-
</span>
|
|
3439
|
-
</button>
|
|
3440
|
-
|
|
3441
|
-
<ul
|
|
3442
|
-
class="pf-v6-c-select__menu"
|
|
3443
|
-
role="listbox"
|
|
3444
|
-
aria-labelledby="select-placeholder-expanded-label"
|
|
3445
|
-
>
|
|
3446
|
-
<li role="presentation">
|
|
3447
|
-
<button class="pf-v6-c-select__menu-item" role="option">Running</button>
|
|
3448
|
-
</li>
|
|
3449
|
-
<li role="presentation">
|
|
3450
|
-
<button
|
|
3451
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
3452
|
-
role="option"
|
|
3453
|
-
aria-selected="true"
|
|
3454
|
-
>
|
|
3455
|
-
Stopped
|
|
3456
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
3457
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
3458
|
-
</span>
|
|
3459
|
-
</button>
|
|
3460
|
-
</li>
|
|
3461
|
-
<li role="presentation">
|
|
3462
|
-
<button class="pf-v6-c-select__menu-item" role="option">Down</button>
|
|
3463
|
-
</li>
|
|
3464
|
-
<li role="presentation">
|
|
3465
|
-
<button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
|
|
3466
|
-
</li>
|
|
3467
|
-
<li role="presentation">
|
|
3468
|
-
<button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
|
|
3469
|
-
</li>
|
|
3470
|
-
</ul>
|
|
3471
|
-
</div>
|
|
3472
|
-
|
|
3473
|
-
```
|
|
3474
|
-
|
|
3475
|
-
### Placeholder item disabled
|
|
3476
|
-
|
|
3477
|
-
```html
|
|
3478
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
3479
|
-
<span id="select-placeholder-item-disabled-label" hidden>Choose one</span>
|
|
3480
|
-
|
|
3481
|
-
<button
|
|
3482
|
-
class="pf-v6-c-select__toggle pf-m-placeholder"
|
|
3483
|
-
type="button"
|
|
3484
|
-
id="select-placeholder-item-disabled-toggle"
|
|
3485
|
-
aria-haspopup="true"
|
|
3486
|
-
aria-expanded="true"
|
|
3487
|
-
aria-labelledby="select-placeholder-item-disabled-label select-placeholder-item-disabled-toggle"
|
|
3488
|
-
>
|
|
3489
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
3490
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
3491
|
-
</div>
|
|
3492
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
3493
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3494
|
-
</span>
|
|
3495
|
-
</button>
|
|
3496
|
-
|
|
3497
|
-
<ul
|
|
3498
|
-
class="pf-v6-c-select__menu"
|
|
3499
|
-
role="listbox"
|
|
3500
|
-
aria-labelledby="select-placeholder-item-disabled-label"
|
|
3501
|
-
>
|
|
3502
|
-
<li role="presentation">
|
|
3503
|
-
<button
|
|
3504
|
-
class="pf-v6-c-select__menu-item"
|
|
3505
|
-
role="option"
|
|
3506
|
-
disabled
|
|
3507
|
-
>Filter by status</button>
|
|
3508
|
-
</li>
|
|
3509
|
-
<li role="presentation">
|
|
3510
|
-
<button class="pf-v6-c-select__menu-item" role="option">Running</button>
|
|
3511
|
-
</li>
|
|
3512
|
-
<li role="presentation">
|
|
3513
|
-
<button
|
|
3514
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
3515
|
-
role="option"
|
|
3516
|
-
aria-selected="true"
|
|
3517
|
-
>
|
|
3518
|
-
Stopped
|
|
3519
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
3520
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
3521
|
-
</span>
|
|
3522
|
-
</button>
|
|
3523
|
-
</li>
|
|
3524
|
-
<li role="presentation">
|
|
3525
|
-
<button class="pf-v6-c-select__menu-item" role="option">Down</button>
|
|
3526
|
-
</li>
|
|
3527
|
-
<li role="presentation">
|
|
3528
|
-
<button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
|
|
3529
|
-
</li>
|
|
3530
|
-
<li role="presentation">
|
|
3531
|
-
<button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
|
|
3532
|
-
</li>
|
|
3533
|
-
</ul>
|
|
3534
|
-
</div>
|
|
3535
|
-
|
|
3536
|
-
```
|
|
3537
|
-
|
|
3538
|
-
### Placeholder item enabled
|
|
3539
|
-
|
|
3540
|
-
```html
|
|
3541
|
-
<div class="pf-v6-c-select pf-m-expanded">
|
|
3542
|
-
<span id="select-placeholder-item-enabled-label" hidden>Choose one</span>
|
|
3543
|
-
|
|
3544
|
-
<button
|
|
3545
|
-
class="pf-v6-c-select__toggle pf-m-placeholder"
|
|
3546
|
-
type="button"
|
|
3547
|
-
id="select-placeholder-item-enabled-toggle"
|
|
3548
|
-
aria-haspopup="true"
|
|
3549
|
-
aria-expanded="true"
|
|
3550
|
-
aria-labelledby="select-placeholder-item-enabled-label select-placeholder-item-enabled-toggle"
|
|
3551
|
-
>
|
|
3552
|
-
<div class="pf-v6-c-select__toggle-wrapper">
|
|
3553
|
-
<span class="pf-v6-c-select__toggle-text">Filter by status</span>
|
|
3554
|
-
</div>
|
|
3555
|
-
<span class="pf-v6-c-select__toggle-arrow">
|
|
3556
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3557
|
-
</span>
|
|
3558
|
-
</button>
|
|
3559
|
-
|
|
3560
|
-
<ul
|
|
3561
|
-
class="pf-v6-c-select__menu"
|
|
3562
|
-
role="listbox"
|
|
3563
|
-
aria-labelledby="select-placeholder-item-enabled-label"
|
|
3564
|
-
>
|
|
3565
|
-
<li role="presentation">
|
|
3566
|
-
<button class="pf-v6-c-select__menu-item" role="option">Filter by status</button>
|
|
3567
|
-
</li>
|
|
3568
|
-
<li role="presentation">
|
|
3569
|
-
<button class="pf-v6-c-select__menu-item" role="option">Running</button>
|
|
3570
|
-
</li>
|
|
3571
|
-
<li role="presentation">
|
|
3572
|
-
<button
|
|
3573
|
-
class="pf-v6-c-select__menu-item pf-m-selected"
|
|
3574
|
-
role="option"
|
|
3575
|
-
aria-selected="true"
|
|
3576
|
-
>
|
|
3577
|
-
Stopped
|
|
3578
|
-
<span class="pf-v6-c-select__menu-item-icon">
|
|
3579
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
3580
|
-
</span>
|
|
3581
|
-
</button>
|
|
3582
|
-
</li>
|
|
3583
|
-
<li role="presentation">
|
|
3584
|
-
<button class="pf-v6-c-select__menu-item" role="option">Down</button>
|
|
3585
|
-
</li>
|
|
3586
|
-
<li role="presentation">
|
|
3587
|
-
<button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
|
|
3588
|
-
</li>
|
|
3589
|
-
<li role="presentation">
|
|
3590
|
-
<button class="pf-v6-c-select__menu-item" role="option">Needs maintenance</button>
|
|
3591
|
-
</li>
|
|
3592
|
-
</ul>
|
|
3593
|
-
</div>
|
|
3594
|
-
|
|
3595
|
-
```
|
|
3596
|
-
|
|
3597
|
-
### Usage
|
|
3598
|
-
|
|
3599
|
-
| Class | Applied to | Outcome |
|
|
3600
|
-
| -- | -- | -- |
|
|
3601
|
-
| `.pf-m-placeholder` | `.pf-v6-c-select__toggle` | Modifies the toggle for placeholder styles. |
|
|
3602
|
-
|
|
3603
|
-
## Documentation
|
|
3604
|
-
|
|
3605
|
-
### Overview
|
|
3606
|
-
|
|
3607
|
-
There are 4 variants of the select component: single select, single select with typeahead, multiple select with typeahead, and a multiple checkbox select. See the examples for more details about each variation.
|
|
3608
|
-
|
|
3609
|
-
The single select should be used when the user is selecting an option from a list of items. Although the presentation is similar to the basic dropdown, the underlying HTML and ARIA tag structure is specific to a select list. The selection will replace the default text in the toggle. The selection is highlighted with the list is opened. If the selection is cleared elsewhere (i.e. from the filter bar), the default text is restored.
|