Select Fields

Select fields let the user select an option from a given set. Selects can also support search within the set, grouping, and selecting multiple options. Style Guide provides a back-up, CSS only select, if the Select2 library can not be included.

Selects rely on the Select2 library. Please see the library documentation for more information.

Standard

Sender is a required field.
Container(s) .input-select-wrap
Modifiers .is-required .is-error .is-disabled
HTML Elements label.input-select-label select option
<div class="input-select-wrap">
<label class="input-select-label" for="select2-example-default">Sender</label>
<select id="select2-example-default">
<option></option>
<option value="Jason">Jason</option>
<option value="Evan">Evan</option>
<option value="Katrina">Katrina</option>
</select>
</div>
view raw select2.html hosted with ❤ by GitHub
$("#select2-example-default").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
});
view raw select2.js hosted with ❤ by GitHub

Groups

Container(s) .input-select-wrap
Modifiers .is-required .is-error .is-disabled
HTML Elements label.input-select-label select optgroup option
<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-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
});

Tooltip

Container(s) .input-select-wrap
Modifiers .is-required .is-error .is-disabled
HTML Elements label.input-select-label select option
<div class="input-select-wrap">
<label class="input-select-label" for="select2-example-default">Sender</label>
<select id="select2-example-default">
<option></option>
<option value="Jason">Jason</option>
<option value="Evan">Evan</option>
<option value="Katrina">Katrina</option>
</select>
</div>
view raw select2.html hosted with ❤ by GitHub
$("#select2-example-default").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
});
view raw select2.js hosted with ❤ by GitHub

Multiple

Container(s) .input-select-wrap
Modifiers .is-required .is-error .is-disabled
HTML Elements label.input-select-label select optgroup option
<div class="input-select-wrap">
<label class="input-select-label" for="select2-example-multiple">Lists</label>
<select id="select2-example-multiple" multiple>
<option></option>
<option value="All Contacts">All Contacts</option>
<option value="Co-Workers">Co-Workers</option>
<option value="Friends">Friends</option>
<option value="Engaged">Engaged</option>
</select>
</div>
$("#select2-example-multiple").select2({
width: "100%", // sets inline width to 100%
placeholder: "Select your lists", // show a placeholder
}).focus(function() {
$(this).select2("open"); // extend select2 to open on label focus
});

CSS Only

Container(s) .input-select-wrap .input-select
Modifiers .is-required .is-error .is-disabled
HTML Elements label.input-select-label select option
<div class="input-select-wrap">
<label class="input-select-label" for="select-example-default">State</label>
<div class="input-select">
<select id="select-example-default">
<option selected="true">Select a state</option>
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
view raw select.html hosted with ❤ by GitHub
$("#select-example-default").on('blur', function() {
$(this).parent().removeClass("is-focused"); // add is-focused on .input-select
}).on('focus', function() {
$(this).parent().addClass("is-focused"); // remove is-focused on .input-select
});
view raw select.js hosted with ❤ by GitHub