Select development
The custom select and it's states.
Example
Placeholder
Option 1
Option 2
Option 3
<div class="select select--open">
<label for="select" class="select__label">Label</label>
<input type="hidden" name="select">
<div class="select__container" tabindex="0">
<div class="select__display">
<div class="select__placeholder">Placeholder</div>
</div>
<svg width="18px" height="18px" class="select__chevron">
<use xlink:href="#chevron-down-icon"></use>
</svg>
</div>
<div class="select__dropdown" tabindex="-1">
<div class="select-option">Option 1</div>
<div class="select-option select-option--disabled">Option 2</div>
<div class="select-option">Option 3</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
← Radio Select native →