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>

Label Positioning

The default position of select dropdown labels is to the left. However, labels can be positioned above selects using the modifier .is-stacked.



 
<div class="input-group is-stacked">
<label>Label</label>
<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>
</div>
<br>
<div class="input-group">
<label>Label</label>
<div class="input has-arrow is-active">
<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>
</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.