SendGrid style-guide select2 groups

select2-groups.html

<div class="input-select-wrap">
  <label class="input-select-label" for="select2-example-groups">Senders</label>
  <select id="select2-example-groups">
    <option></option>
    <optgroup label="Marketing">
      <option value="Evan">Evan</option>
      <option value="Molly">Molly</option>
      <option value="Dan">Dan</option>
    </optgroup>
    <optgroup label="UI/UX">
      <option value="Jason">Jason</option>
      <option value="Katrina">Katrina</option>
      <option value="Katie">Katie</option>
    </optgroup>
  </select>
</div>

select2-groups.js

$("#select2-example-groups").select2({
  width: "100%", // sets inline width to 100%
  minimumResultsForSearch: Infinity, // disables search
  placeholder: "Select a sender", // show a placeholder
}).focus(function() {
  $(this).select2("open"); // extend select2 to open on label focus
});