Overview
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. For full documentation please check the
plugin's site .
Usage
Select2's CSS and Javascript files are bundled in the global plugin bundles and globally included in all pages:
copy
<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/plugins/global/plugins.bundle.js"></script>
Initialization
Select2's CSS is highly customized in
sass/vendors/plugins/_select2.scss
SCSS file in order to use it as native component within the design system. The SCSS code is compiled into
assets/plugins/global/plugins.bundle.css
and globally included in all pages.
Select2's Javascript is globally initialized with some predefined settings in
src/js/vendors/plugins/select2.init.js
and the initialization code is bundled within
assets/plugins/global/plugins.bundle.js
and globally included in all pages.
Select2's is globally initialized through
data-control="select2"
HTML attribute as defined in
src/js/layout/app.js
and some options can be be passed through
Select2 Data Attributes .
Basic Examples
Basic examples of Select2 usage with default and solid background input styles:
Default input style
Option 1
Option 2
Option 3
Option 4
Option 5
White background style
Option 1
Option 2
Option 3
Option 4
Option 5
Solid background style
Option 1
Option 2
Option 3
Option 4
Option 5
copy
<select class="form-select" data-control="select2" data-placeholder="Select an option">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="form-select form-select-white" data-control="select2" data-placeholder="Select an option">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="form-select form-select-solid" data-control="select2" data-placeholder="Select an option">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
Add
<option></option>
empty option in order to display the placeholder when selection is not made.
Add
data-dropdown-parent="#modal_element_id"
option to fix uneditable search input when Select2 is used on Bootstrap Modal with
tabindex="-1"
.
Sizes
Apply the standard Bootstrap input sizes
.form-select-sm
and
.form-select-lg
:
Small size
Option 1
Option 2
Option 3
Option 4
Option 5
Default size
Option 1
Option 2
Option 3
Option 4
Option 5
Large size
Option 1
Option 2
Option 3
Option 4
Option 5
copy
<select class="form-select form-select-sm form-select-solid" data-control="select2" data-placeholder="Select an option">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="form-select form-select-lg form-select-solid" data-control="select2" data-placeholder="Select an option">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
Clear Selection
Add
data-allow-clear="true"
attribute to allow clearing selected options.
Clearable option
Option 1
Option 2
Option 3
Option 4
Option 5
copy
<select class="form-select form-select-solid" data-control="select2" data-placeholder="Select an option" data-allow-clear="true">
<option></option>
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
Hide Search
Add
data-hide-search="true"
attribute to hide the search input in the dropdown list.
Clearable option
Option 1
Option 2
Option 3
Option 4
Option 5
copy
<select class="form-select form-select-solid" data-control="select2" data-placeholder="Select an option" data-hide-search="true">
<option></option>
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
Multiple Selection
Declare a selectbox with
multiple="multiple"
attribute to allow multiple selection with a tag control.
Multiple Selection
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
Option 10
Small size
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
Option 10
Large size
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
Option 10
copy
<select class="form-select form-select-solid" data-control="select2" data-placeholder="Select an option" data-allow-clear="true" multiple="multiple">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="form-select form-select-sm form-select-solid" data-control="select2" data-placeholder="Select an option" data-allow-clear="true" multiple="multiple">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="form-select form-select-lg form-select-solid" data-control="select2" data-placeholder="Select an option" data-allow-clear="true" multiple="multiple">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
Hierarchical Options
Use
<optgroup></optgroup>
tag to display options in single level groups:
Clearable option
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
copy
<select class="form-select form-select-solid" data-control="select2" data-placeholder="Select an option" data-allow-clear="true">
<option></option>
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
Modal Example
Use Select2 within Bootstrap Modal:
Launch demo modal
Modal example
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
Option 10
copy
<!--begin::Modal-->
<div class="modal fade" tabindex="-1" id="kt_modal_1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<span class="svg-icon svg-icon-2x"></span>
</div>
<!--end::Close-->
</div>
<div class="modal-body">
<div class="mb-10">
<label for="" class="form-label">Modal example</label>
<select class="form-select form-select-solid" data-control="select2" data-dropdown-parent="#kt_modal_1" data-placeholder="Select an option" data-allow-clear="true">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--end::Modal-->
Validation States
copy
<form class="was-validated">
<div class="mb-10">
<label for="" class="form-label">Valid state</label>
<select class="form-select form-select-solid is-valid" data-control="select2" data-placeholder="Select an option" data-allow-clear="true" multiple="multiple">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="0">
<label for="" class="form-label">Invalid state</label>
<select class="form-select form-select-solid is-invalid" data-control="select2" data-placeholder="Select an option" data-allow-clear="true" multiple="multiple">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
<div id="validationServerUsernameFeedback" class="invalid-feedback">
Please choose a username.
</div>
</div>
</form>