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

<select class="a-input">
  <option>Base Select</option>
</select>

Pill

Use the -pill modifier class to render a select with a more pronounced border-radius.

<select class="a-input -pill">
  <option>Base Select</option>
</select>

Disabled

<select class="a-input" disabled>
  <option>Disabled Select</option>
</select>

With Label

<div class="m-formGroup -labeled">
  <label class="a-label" for="example">Label</label>
  <select class="a-input" id="example">
    <option>Base Select</option>
  </select>
</div>

Danger

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

<select class="a-input -danger">
  <option>Danger Select</option>
</select>

Sizes

Selects supports a full spectrum of sizes: -sm, -md, -lg, -xl. The default size is -md.

<select class="a-input -sm">
  <option>-sm Select</option>
</select>
<select class="a-input -md">
  <option>-md Select</option>
</select>
<select class="a-input -lg">
  <option>-lg Select</option>
</select>
<select class="a-input -xl">
  <option>-xl Select</option>
</select>