| 1 | |
| 2 | |
| 3 | |
| 4 | |
| 5 | |
| 6 |
|
| 7 |
|
| 8 | <div class="bx--form-item">
|
| 9 | <div class="bx--list-box__wrapper ">
|
| 10 | <label class="bx--label">Multi-Select label</label>
|
| 11 | <div class="bx--form__helper-text">Optional helper text here</div>
|
| 12 | <div
|
| 13 | class="bx--multi-select bx--list-box bx--combo-box bx--multi-select--filterable">
|
| 14 | <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu"
|
| 15 | aria-expanded="false" aria-haspopup="true">
|
| 16 | <input class="bx--text-input" placeholder="Filter...">
|
| 17 | <div class="bx--list-box__menu-icon">
|
| 18 | <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>
|
| 19 | </div>
|
| 20 | </div>
|
| 21 | </div>
|
| 22 | </div>
|
| 23 | </div>
|
| 24 | <div class="bx--form-item">
|
| 25 | <div class="bx--list-box__wrapper ">
|
| 26 | <label class="bx--label">Multi-Select label</label>
|
| 27 | <div class="bx--form__helper-text">Optional helper text here</div>
|
| 28 | <div
|
| 29 | class="bx--multi-select bx--list-box bx--list-box--expanded bx--multi-select--selected bx--combo-box bx--multi-select--filterable">
|
| 30 | <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu"
|
| 31 | aria-expanded="true" aria-haspopup="true">
|
| 32 | <div role="button" class="bx--list-box__selection bx--list-box__selection--multi"
|
| 33 | tabindex="0" title="Clear all selected items">
|
| 34 | 1
|
| 35 | <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>
|
| 36 | </div>
|
| 37 | <input class="bx--text-input" placeholder="Filter...">
|
| 38 | <div class="bx--list-box__menu-icon">
|
| 39 | <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>
|
| 40 | </div>
|
| 41 | </div>
|
| 42 | <fieldset class="bx--list-box__menu" role="listbox">
|
| 43 | <legend class="bx--assistive-text">Description of form elements within the fieldset</legend>
|
| 44 | <div class="bx--list-box__menu-item">
|
| 45 | <div class="bx--list-box__menu-item__option">
|
| 46 | <div class="bx--form-item bx--checkbox-wrapper">
|
| 47 | <label title="Option 1" class="bx--checkbox-label">
|
| 48 | <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-0"
|
| 49 | value="on" checked>
|
| 50 | <span class="bx--checkbox-appearance"></span>
|
| 51 | <span class="bx--checkbox-label-text">Option 1</span>
|
| 52 | </label>
|
| 53 | </div>
|
| 54 | </div>
|
| 55 | </div>
|
| 56 | <div class="bx--list-box__menu-item">
|
| 57 | <div class="bx--list-box__menu-item__option">
|
| 58 | <div class="bx--form-item bx--checkbox-wrapper">
|
| 59 | <label title="Option 2" class="bx--checkbox-label">
|
| 60 | <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-1"
|
| 61 | value="on" >
|
| 62 | <span class="bx--checkbox-appearance"></span>
|
| 63 | <span class="bx--checkbox-label-text">Option 2</span>
|
| 64 | </label>
|
| 65 | </div>
|
| 66 | </div>
|
| 67 | </div>
|
| 68 | <div class="bx--list-box__menu-item">
|
| 69 | <div class="bx--list-box__menu-item__option">
|
| 70 | <div class="bx--form-item bx--checkbox-wrapper">
|
| 71 | <label title="Option 3" class="bx--checkbox-label">
|
| 72 | <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-2"
|
| 73 | value="on" >
|
| 74 | <span class="bx--checkbox-appearance"></span>
|
| 75 | <span class="bx--checkbox-label-text">Option 3</span>
|
| 76 | </label>
|
| 77 | </div>
|
| 78 | </div>
|
| 79 | </div>
|
| 80 | <div class="bx--list-box__menu-item">
|
| 81 | <div class="bx--list-box__menu-item__option">
|
| 82 | <div class="bx--form-item bx--checkbox-wrapper">
|
| 83 | <label title="Option 4" class="bx--checkbox-label">
|
| 84 | <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-3"
|
| 85 | value="on" >
|
| 86 | <span class="bx--checkbox-appearance"></span>
|
| 87 | <span class="bx--checkbox-label-text">Option 4</span>
|
| 88 | </label>
|
| 89 | </div>
|
| 90 | </div>
|
| 91 | </div>
|
| 92 | <div class="bx--list-box__menu-item">
|
| 93 | <div class="bx--list-box__menu-item__option">
|
| 94 | <div class="bx--form-item bx--checkbox-wrapper">
|
| 95 | <label title="An example option that is really long to show what should be done to handle long text" class="bx--checkbox-label">
|
| 96 | <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-4"
|
| 97 | value="on" >
|
| 98 | <span class="bx--checkbox-appearance"></span>
|
| 99 | <span class="bx--checkbox-label-text">An example option that is really long to show what should be done to handle long text</span>
|
| 100 | </label>
|
| 101 | </div>
|
| 102 | </div>
|
| 103 | </div>
|
| 104 | </fieldset>
|
| 105 | </div>
|
| 106 | </div>
|
| 107 | </div>
|