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.
<divclass="input has-arrow"><selectname=""><optionvalue=""disabled=""selected="">Select your option</option><optionvalue="">Value 1</option><optionvalue="">Value 2</option><optionvalue="">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.
<divclass="input has-arrow"><selectname=""><optionvalue=""disabled="">Select your option</option><optionvalue=""selected="">Value 1</option><optionvalue="">Value 2</option><optionvalue=""disabled="">Value 3</option></select></div><br><divclass="input has-arrow"><selectname=""disabled=""><optionvalue=""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.