Select

A select let users select an option.

The following code examples shows how to use select:

<select class="select">
  <option class="select__option" value="1">Item 1</option>
  <option class="select__option" value="2">Item 2</option>
</select>

<select class="select">
  <optgroup class="select__optgroup" label="Numbers">
    <option class="select__option" value="1">Item 1</option>
    <option class="select__option" value="2">Item 2</option>
  </optgroup>
  <optgroup class="select__optgroup" label="Chars">
    <option class="select__option" value="a">Item A</option>
    <option class="select__option" value="a">Item B</option>
  </optgroup>
</select>

The following list describe all existing block/element/modifier classes of the component.

• .select - required the block class, must be an <select>
• .select__option - required the element class, must be an <option>
• .select__optgroup - the element class, must be an <optgroup>
• Modifier
  • .select--stretch use width 100%
  • .select--stretch-{SCREEN_SIZE} width 100% until the screen size
  • .select--scale-{SCALE} scale the size of the input
  • .select--scale-{SCALE}-{SCREEN_SIZE} scale until the screen size

The variables are:

• SCREEN_SIZE lg, md, sm, xs
• SCALE x0.750, x0.875, x1.000, x1.125, x1.250, x1.375, x1.500

The following examples show the basic variants of selects. The html attributes [disabled], [required] and [multiple] are also shown. Particularly noteworthy are the class modifier .select--valid and .select--invalid. These are set specifically via this modifier.

Modifier

A select can be customized using class modifiers. The following sub-chapters list all existing classes of select modifier.

Scale

An select with this modifier scale the complete select with text/height/width and every thing else that is based on em units.

The values are to be interpreted as percentages, i.e. a .select--scaling-x0.875 select is smaller as the normal select, while a .select--scaling-x1.500 is larger.

DEPRECATED the old {SCALE} values were 0750, 0875, 1000, 1125, 1250, 1375, 1500

Stretch

The following examples show the stretched select.

Sizing

TODO Create a .select--size select that change the select height without changing the font-size.