UNPKG

5.57 kBHTMLView Raw
1<!--
2 Copyright IBM Corp. 2016, 2018
3
4 This source code is licensed under the Apache-2.0 license found in the
5 LICENSE file in the root directory of this source tree.
6-->
7
8<div class="bx--form-item">
9 <div class="bx--list-box__wrapper bx--list-box__wrapper--inline">
10 <label class="bx--label">Multi-Select label</label>
11 <div
12 class="bx--multi-select bx--list-box bx--list-box--inline">
13 <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu"
14 aria-expanded="false" aria-haspopup="true">
15 <span class="bx--list-box__label">Multi select options</span>
16 <div class="bx--list-box__menu-icon">
17 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-label="Open menu" width="16" height="16" viewBox="0 0 16 16" role="img"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
18 </div>
19 </div>
20 </div>
21 </div>
22</div>
23<div class="bx--form-item">
24 <div class="bx--list-box__wrapper bx--list-box__wrapper--inline">
25 <label class="bx--label">Multi-Select label</label>
26 <div
27 class="bx--multi-select bx--list-box bx--list-box--expanded bx--multi-select--selected bx--list-box--inline">
28 <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu"
29 aria-expanded="true" aria-haspopup="true">
30 <div role="button" class="bx--list-box__selection bx--list-box__selection--multi"
31 tabindex="0" title="Clear all selected items">
32 1
33 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-label="Clear selection" width="16" height="16" viewBox="0 0 16 16" role="img"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
34 </div>
35 <span class="bx--list-box__label">Multi select options</span>
36 <div class="bx--list-box__menu-icon">
37 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-label="Close menu" width="16" height="16" viewBox="0 0 16 16" role="img"><path d="M8 5l5 5-.7.7L8 6.4l-4.3 4.3L3 10z"></path></svg>
38 </div>
39 </div>
40 <fieldset class="bx--list-box__menu" role="listbox">
41 <legend class="bx--assistive-text">Description of form elements within the fieldset</legend>
42 <div class="bx--list-box__menu-item">
43 <div class="bx--list-box__menu-item__option">
44 <div class="bx--form-item bx--checkbox-wrapper">
45 <label title="Option 1" class="bx--checkbox-label">
46 <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-0"
47 value="on" checked>
48 <span class="bx--checkbox-appearance"></span>
49 <span class="bx--checkbox-label-text">Option 1</span>
50 </label>
51 </div>
52 </div>
53 </div>
54 <div class="bx--list-box__menu-item">
55 <div class="bx--list-box__menu-item__option">
56 <div class="bx--form-item bx--checkbox-wrapper">
57 <label title="Option 2" class="bx--checkbox-label">
58 <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-1"
59 value="on" >
60 <span class="bx--checkbox-appearance"></span>
61 <span class="bx--checkbox-label-text">Option 2</span>
62 </label>
63 </div>
64 </div>
65 </div>
66 <div class="bx--list-box__menu-item">
67 <div class="bx--list-box__menu-item__option">
68 <div class="bx--form-item bx--checkbox-wrapper">
69 <label title="Option 3" class="bx--checkbox-label">
70 <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-2"
71 value="on" >
72 <span class="bx--checkbox-appearance"></span>
73 <span class="bx--checkbox-label-text">Option 3</span>
74 </label>
75 </div>
76 </div>
77 </div>
78 <div class="bx--list-box__menu-item">
79 <div class="bx--list-box__menu-item__option">
80 <div class="bx--form-item bx--checkbox-wrapper">
81 <label title="Option 4" class="bx--checkbox-label">
82 <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-3"
83 value="on" >
84 <span class="bx--checkbox-appearance"></span>
85 <span class="bx--checkbox-label-text">Option 4</span>
86 </label>
87 </div>
88 </div>
89 </div>
90 <div class="bx--list-box__menu-item">
91 <div class="bx--list-box__menu-item__option">
92 <div class="bx--form-item bx--checkbox-wrapper">
93 <label title="An example option that is really long to show what should be done to handle long text" class="bx--checkbox-label">
94 <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-4"
95 value="on" >
96 <span class="bx--checkbox-appearance"></span>
97 <span class="bx--checkbox-label-text">An example option that is really long to show what should be done to handle long text</span>
98 </label>
99 </div>
100 </div>
101 </div>
102 </fieldset>
103 </div>
104 </div>
105</div>