Selects

Selects are used to store selectable options and collect user input. They come in a variety of sizes and states. Their labels can be positioned either to the left or the right.

Implementation

Denali selects are built using <select> tags. Labels and hint labels can be added using the <label> tag and selected attribute.



 
<div class="input has-arrow">
<select name="">
<option value="" disabled="" selected="">Select your option</option>
<option value="">Value 1</option>
<option value="">Value 2</option>
<option value="">Value 3</option>
</select>
</div>

States

Selects have 2 states - active and disabled. By default, a blue underline appears when select drop downs are active. However, you can force the active state appearance by adding the .is-active modifier or attribute to your select dropdown. Select dropdowns that are disabled have a greyed out appearance. The disabled appearance can be accessed by adding the .is-disabled modifier to your select dropdowns.



<div class="input has-arrow">
<select name="">
<option value="" disabled="">Select your option</option>
<option value="" selected="">Value 1</option>
<option value="">Value 2</option>
<option value="" disabled="">Value 3</option>
</select>
</div>
<br>
<div class="input has-arrow">
<select name="" disabled="">
<option value="" disabled="" selected="">Select your option</option>
</select>
</div>

Sizes

Denali offers 3 selects sizes - default, medium, and small. The default field size is automatically built into our selects. However, you may access smaller sizes using the .is-medium or .is-small modifiers.



<div class="input has-arrow">
    <select name="">
        <option value="" disabled="">Select your option</option>
        <option value="" selected="">Value 1</option>
        <option value="">Value 2</option>
        <option value="">Value 3</option>
    </select>
</div>
<br>
<div class="input is-medium has-arrow">
    <select name="">
        <option value="" disabled="">Select your option</option>
        <option value="" selected="">Value 1</option>
        <option value="">Value 2</option>
        <option value="">Value 3</option>
    </select>
</div>
<br>
<div class="input is-small has-arrow">
    <select name="">
        <option value="" disabled="">Select your option</option>
        <option value="" selected="">Value 1</option>
        <option value="">Value 2</option>
        <option value="">Value 3</option>
    </select>
</div>

Inverse

When adding an input to a dark background, like a navbar. Add .is-inverse to the .input wrapper.



<div class="input is-inverse has-arrow">
    <select name="">
        <option value="" disabled="">Select your option</option>
        <option value="" selected="">Value 1</option>
        <option value="">Value 2</option>
        <option value="" disabled="">Value 3</option>
    </select>
</div>

Variables

You can use these variables in a override.css file to customize this component.

The selects component utilized the fields variables, please refer to this page.