UNPKG

3.02 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
10 class="bx--select">
11 <label for="select-id" class="bx--label">Select label</label>
12 <div class="bx--select-input__wrapper" >
13 <select id="select-id" class="bx--select-input">
14 <option class="bx--select-option" value="" disabled selected hidden>
15 Choose an option
16 </option>
17 <option class="bx--select-option" value="solong" >
18 A much longer option that is worth having around to check how text flows
19 </option>
20 <optgroup class="bx--select-optgroup" label="Category 1">
21 <option class="bx--select-option" value="option1" >
22 Option 1
23 </option>
24 <option class="bx--select-option" value="option2" >
25 Option 2
26 </option>
27 </optgroup>
28 <optgroup class="bx--select-optgroup" label="Category 2">
29 <option class="bx--select-option" value="option1" >
30 Option 1
31 </option>
32 <option class="bx--select-option" value="option2" >
33 Option 2
34 </option>
35 </optgroup>
36 </select>
37 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
38 </div>
39 </div>
40 </div>
41</div>
42
43<div class="bx--form-item">
44 <div
45 class="bx--select bx--select--disabled">
46 <label for="select-id-disabled" class="bx--label bx--label--disabled">Select
47 label</label>
48 <div class="bx--select-input__wrapper" >
49 <select id="select-id-disabled" class="bx--select-input" disabled>
50
51 <option class="bx--select-option" value="" disabled selected hidden>Choose an option </option>
52 <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option> <optgroup class="bx--select-optgroup" label="Category 1">
53 <option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> <optgroup class="bx--select-optgroup" label="Category 2">
54 <option class="bx--select-option" value="option1" >Option 1 </option> <option class="bx--select-option" value="option2" >Option 2 </option> </optgroup> </select>
55 <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
56 </div>
57 </div>
58 </div>
59</div>