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.
<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.