Styleguides

Shared Assets & Docs

Menu

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

We have a version that is styled to match our look. To use, include select2.js and select2.css from our shared assets host.

Standard Select2

Check out the official documentation for how to use it.

<select id="select2" data-placeholder="Select an Option">
  <option></option>
  <option value="Option 1">Option 1</option>
  ...
</select>
<script>
  $(function() {
    $('#select2').select2({ allowClear: true });
  });
</script>

Multiple Select

Turning a multiple select field creates a token-style input:

<select id="select2" multiple>
  <option value="red" selected>red</option>
  ...
</select>
<script>
  $(function() {
    $('#select2').select2();
  });
</script>

Color Variations

The Select2 component automatically picks up the styles from .gray-form and .underlined-form.

<form class="form gray-form">
  <div class="field">
    <div class="field-input">
      <select class="select2">
        <option value="Option 1">Option 1</option>
        ...
      </select>
    </div> <!-- .field-input -->
  </div> <!-- .field -->
</form> <!-- .gray-form -->
<form class="form underlined-form">
  <div class="field">
    <div class="field-input">
      <select class="select2">
        <option value="Option 1">Option 1</option>
        ...
      </select>
    </div> <!-- .field-input -->
  </div> <!-- .field -->
</form> <!-- .underlined-form -->
<script>
  $(function() {
    $('.select2').select2();
  });
</script>