Stylesheet material-plugins.css
is required as these material design themes for Select2 are fully designed by djibe.
jQuery is required.
Demo
Using Select2
Import material-plugins.css after Material CSS. Don’t use official Select2 CSS.
<link href="https://cdn.jsdelivr.net/gh/djibe/material@4.6.2-1.0/css/material-plugins.min.css" rel="stylesheet">
Import Select2 after Material JavaScripts.
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
Set HTML code of your select menu. You should keep .form-control
class for better mobile accessibility (refer to dedicated chapter below).
NB. With Select2, in simple select lists, you need to set a first blank <option>
in order to set a placeholder.
<select class="form-control js-example-basic-single" name="fruit">
<option></option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
</select>
Initialize plugin with jQuery parameters. Default theme is the same as default form inputs.
Extra themes include filled
(like the Demo above) and outlined
.
$(function() {
$('.js-example-basic-single').select2({
theme: 'filled',
placeholder: 'Fruit',
width: '240px',
minimumResultsForSearch: Infinity /* Hide search on single select */
});
})
All parameters are detailed in Select2’s official documentation.
That’s it.
Select2 material themes
Each theme has its disabled state.
Default theme
No need to set the theme in Select2 options in order to use default theme.
<select class="form-control js-example-default-single" name="fruit">
<option></option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
</select>
<script>
$(function() {
$('.js-example-default-single').select2({
placeholder: 'Fruit',
width: '240px',
minimumResultsForSearch: Infinity /* Hide search on single select */
});
})
</script>
Filled theme
Set theme to filled
for filled material inputs (like textfieldbox
ones).
<select class="form-control js-example-basic-single" name="fruit">
<option></option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
</select>
<script>
$(function() {
$('.js-example-basic-single').select2({
theme: 'filled',
placeholder: 'Fruit',
width: '240px',
multiple: false,
minimumResultsForSearch: Infinity /* Hide search on single select */
});
})
</script>
Outlined theme
Set theme to outlined
for outlined material inputs.
<select class="form-control js-example-outlined-single" name="fruit">
<option></option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
</select>
<script>
$(function() {
$('.js-example-outlined-single').select2({
theme: 'outlined',
placeholder: 'Fruit',
width: '240px',
multiple: false,
minimumResultsForSearch: Infinity /* Hide search on single select */
});
})
</script>
Options
Various features are supported: Multiple select, optgroup.
<select class="form-control js-example-basic-multiple" name="cars" multiple>
<optgroup label="French Cars">
<option value="AL">Citroën</option>
<option value="OR" disabled>Peugeot</option>
<option value="BA">Renault</option>
</optgroup>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<script>
$(function() {
$('.js-example-basic-multiple').select2({
theme: 'filled',
placeholder: 'Cars',
width: '400px'
});
})
</script>
Single select with search field.
<select class="form-control js-example-search-single" name="cars">
<optgroup label="French Cars">
<option value="AL">Citroën</option>
<option value="OR" disabled>Peugeot</option>
<option value="BA">Renault</option>
</optgroup>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<script>
$(function() {
$('.js-example-search-single').select2({
theme: 'filled',
placeholder: 'Cars',
width: '240px'
});
})
</script>
Mobile accessibility
In order to achieve optimal accessibility on mobile devices, you should initialize Select2 only on large devices.
This example will use default Android/iOS select on small devices (with a filled/textfield-box
style) and Select2 on larger screens.
if (window.matchMedia("(min-width: 768px)").matches) {
$('.js-example-basic-single').select2({
theme: "filled",
placeholder: 'Fruit',
width: '240px',
minimumResultsForSearch: Infinity /* Hide search on single */
});
} else {
$('.js-example-basic-single').wrap('<div class="textfield-box"></div>');
}