Design Kit

Select

Selects are used to select a single item in a list of many options.

Examples

To render a select, apply the class a-input to a select.

Base

<div class="m-form__item">
  <label class="a-label" for="select01">Label</label>
  <select class="a-input" id="select01">
    <option>Base Select</option>
  </select>
</div>

Disabled

<div class="m-form__item">
  <label class="a-label" for="select02">Label</label>
  <select class="a-input" id="select02" disabled>
    <option>Disabled Select</option>
  </select>
</div>

Danger

Selects support the validation class modifier -danger for indicating an invalid selection.

<div class="m-form__item">
  <label class="a-label" for="select03">Label</label>
  <select class="a-input -danger" id="select03">
    <option>Danger Select</option>
  </select>
</div>

Sizes

Selects support the following sizes: -sm, -md, -lg, -xl. The default size is -md.

<div class="m-form__item">
  <label class="a-label" for="select04">Label</label>
  <select class="a-input -sm" id="select04">
    <option>-sm Select</option>
  </select>
</div>
<div class="m-form__item">
  <label class="a-label" for="select05">Label</label>
  <select class="a-input -md" id="select05">
    <option>-md Select</option>
  </select>
</div>
<div class="m-form__item">
  <label class="a-label" for="select06">Label</label>
  <select class="a-input -lg" id="select06">
    <option>-lg Select</option>
  </select>
</div>
<div class="m-form__item">
  <label class="a-label" for="select07">Label</label>
  <select class="a-input -xl" id="select07">
    <option>-xl Select</option>
  </select>
</div>