Denali CSS Docs are Moving

We've updated our documenation to align with our other frameworks. Our new documenation will live here and these pages will be removed.

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.