Select
Basic select component using the native select component of the browser.
The select component and its variants are styled as the button component.
<select class="lui-select">
<option value="1" selected>First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<select class="lui-select lui-select--gradient">
<option value="1" selected>First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<select class="lui-select lui-select--inverse">
<option value="1" selected>First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<select class="lui-select lui-select--gradient-inverse">
<option value="1" selected>First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
Select sizing
You can control the size of selects by adding a class. The following sizing options are available:
-
default - 28px
-
large - 38px
<select class="lui-select lui-select--large">
<option value="1" selected>First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
