Select Box Stable

A Select Box is an input field that provides a list of options from which the user chooses a value. They are typically used in forms.

Usage Code

Select box

Fruit… It’s your choice

<div class="selectbox js-selectbox ">
  <select id="sampleSelect1" class="selectbox__select">
    <option value="" disabled="" selected=""></option>
      <option value="Lime" >Lime</option>
      <option value="Orange" >Orange</option>
      <option value="Banana" >Banana</option>
  </select>
  <label class="selectbox__label" for="sampleSelect1">Fruit…</label>
  <small class="selectbox__hint">It’s your choice</small>
</div>

Select box valid state

Fruit… Yes, orange is a great choice.

<div class="selectbox js-selectbox is-valid">
  <select id="sampleSelect1" class="selectbox__select">
    <option value="" disabled="" selected=""></option>
      <option value="Lime" >Lime</option>
      <option value="Orange" selected="selected">Orange</option>
      <option value="Banana" >Banana</option>
  </select>
  <label class="selectbox__label" for="sampleSelect1">Fruit…</label>
  <small class="selectbox__hint">Yes, orange is a great choice.</small>
</div>

Select box invalid state

Fruit… No, this is not a fruit.

<div class="selectbox js-selectbox is-invalid">
  <select id="sampleSelect1" class="selectbox__select">
    <option value="" disabled="" selected=""></option>
      <option value="Lime" >Lime</option>
      <option value="Orange" >Orange</option>
      <option value="Red" selected="selected">Red</option>
  </select>
  <label class="selectbox__label" for="sampleSelect1">Fruit…</label>
  <small class="selectbox__hint">No, this is not a fruit.</small>
</div>