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 .
 
										
									 
									
									
									
										
										
										 
										
										
										
										 
										
										
										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>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										
											
												Select2's CSS is highly customized in
												sass/vendors/plugins/_select2.scssSCSS file in order to use it as native component within the design system. The SCSS code is compiled into
												assets/plugins/global/plugins.bundle.cssand globally included in all pages. 
												Select2's Javascript is globally initialized with some predefined settings in
												src/js/vendors/plugins/select2.init.jsand the initialization code is bundled within
												assets/plugins/global/plugins.bundle.jsand globally included in all pages. 
												Select2's is globally initialized through
												data-control="select2"HTML attribute as defined in
												src/js/layout/app.jsand some options can be be passed through
												Select2 Data Attributes . 
											 
										 
										
									 
									
									
									
										
										
										 
										
										
										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 
													 
												
												
													Transparent 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-transparent" 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".
												
											 
											
										 
									 
									
									
									
										
										
										 
										
										
										Use
										<optgroup>tag to group select options:
										
										
										
											
												Option Groups 
												
													
														Option 1 
														Option 2 
														Option 3 
													 
													
														Option 1 
														Option 2 
														Option 3 
													 
												 
											
										 
										
										
										
											
											
												copy 
												
													
<select class="form-select" data-control="select2" data-placeholder="Select an option">
    <optgroup label="Group 1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </optgroup>
    <optgroup label="Group 2">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </optgroup>
</select>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Apply the standard Bootstrap input sizes
										.form-select-smand
										.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>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										
										
										
										
										
										
											
												
												
												
												
													Both Add-ons in Solid Style 
													
													
													
												 
											 
										 
										
										
										
											
											
												copy 
												
													
<!--begin::Default example-->
<div class="input-group flex-nowrap">
    <span class="input-group-text"><i class="bi bi-bookmarks-fill fs-4"></i></span>
    <div class="overflow-hidden flex-grow-1">
        <select class="form-select rounded-start-0" data-control="select2" data-placeholder="Select an option">
            <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>
</div>
<!--end::Default example-->
<!--begin::Solid input group style-->
<div class="input-group input-group-solid flex-nowrap">
    <span class="input-group-text"><i class="bi bi-calendar fs-4"></i></span>
    <div class="overflow-hidden flex-grow-1">
        <select class="form-select form-select-solid rounded-start-0 border-start" data-control="select2" data-placeholder="Select an option">
            <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>
</div>
<!--end::Solid input group style-->
<!--begin::Both add-ons-->
<div class="input-group flex-nowrap">
    <span class="input-group-text"><i class="bi bi-calculator fs-4"></i></span>
    <div class="overflow-hidden flex-grow-1">
        <select class="form-select rounded-0" data-control="select2" data-placeholder="Select an option">
            <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>
    <span class="input-group-text">.00</span>
</div>
<!--end::Both add-ons-->
<!--begin::Both add-ons in solid style-->
<div class="input-group input-group-solid flex-nowrap">
    <span class="input-group-text"><i class="bi bi-cash-coin fs-4"></i></span>
    <div class="overflow-hidden flex-grow-1">
        <select class="form-select form-select-solid rounded-0 border-start border-end" data-control="select2" data-placeholder="Select an option">
            <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>
    <span class="input-group-text">USD</span>
</div>
<!--end::Both add-ons in solid style-->
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										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>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										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>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										
										
										
										
											
												
													Clearable option 
													
														Option 1 
														Option 2 
														Option 3 
														Option 4 
														Option 5 
													 
												
											 
										 
										
										
										
											
											
												copy 
												
													
<select class="form-select form-select-solid" data-control="select2" data-dropdown-css-class="w-200px" 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>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										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>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										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>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										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-->
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Initialize Select2 programmatically and add
										data-kt-select2-countryattribute with the path to the country flag to create a list with country icons.
										
										
										
											
												Select a country 
												
													Afghanistan 
													Aland Islands 
													Albania 
													Algeria 
													American Samoa 
													Andorra 
													Angola 
													Anguilla 
													Antigua and Barbuda 
													Argentina 
													Armenia 
													Aruba 
													Australia 
													Austria 
													Azerbaijan 
													Bahamas 
													Bahrain 
													Bangladesh 
													Barbados 
													Belarus 
													Belgium 
													Belize 
													Benin 
													Bermuda 
													Bhutan 
													Bolivia, Plurinational State of 
													Bonaire, Sint Eustatius and Saba 
													Bosnia and Herzegovina 
													Botswana 
													Brazil 
													British Indian Ocean Territory 
													Brunei Darussalam 
													Bulgaria 
													Burkina Faso 
													Burundi 
													Cambodia 
													Cameroon 
													Canada 
													Cape Verde 
													Cayman Islands 
													Central African Republic 
													Chad 
													Chile 
													China 
													Christmas Island 
													Cocos (Keeling) Islands 
													Colombia 
													Comoros 
													Cook Islands 
													Costa Rica 
													Côte d'Ivoire 
													Croatia 
													Cuba 
													Curaçao 
													Czech Republic 
													Denmark 
													Djibouti 
													Dominica 
													Dominican Republic 
													Ecuador 
													Egypt 
													El Salvador 
													Equatorial Guinea 
													Eritrea 
													Estonia 
													Ethiopia 
													Falkland Islands (Malvinas) 
													Fiji 
													Finland 
													France 
													French Polynesia 
													Gabon 
													Gambia 
													Georgia 
													Germany 
													Ghana 
													Gibraltar 
													Greece 
													Greenland 
													Grenada 
													Guam 
													Guatemala 
													Guernsey 
													Guinea 
													Guinea-Bissau 
													Haiti 
													Holy See (Vatican City State) 
													Honduras 
													Hong Kong 
													Hungary 
													Iceland 
													India 
													Indonesia 
													Iran, Islamic Republic of 
													Iraq 
													Ireland 
													Isle of Man 
													Israel 
													Italy 
													Jamaica 
													Japan 
													Jersey 
													Jordan 
													Kazakhstan 
													Kenya 
													Kiribati 
													Korea, Democratic People's Republic of 
													Kuwait 
													Kyrgyzstan 
													Lao People's Democratic Republic 
													Latvia 
													Lebanon 
													Lesotho 
													Liberia 
													Libya 
													Liechtenstein 
													Lithuania 
													Luxembourg 
													Macao 
													Madagascar 
													Malawi 
													Malaysia 
													Maldives 
													Mali 
													Malta 
													Marshall Islands 
													Martinique 
													Mauritania 
													Mauritius 
													Mexico 
													Micronesia, Federated States of 
													Moldova, Republic of 
													Monaco 
													Mongolia 
													Montenegro 
													Montserrat 
													Morocco 
													Mozambique 
													Myanmar 
													Namibia 
													Nauru 
													Nepal 
													Netherlands 
													New Zealand 
													Nicaragua 
													Niger 
													Nigeria 
													Niue 
													Norfolk Island 
													Northern Mariana Islands 
													Norway 
													Oman 
													Pakistan 
													Palau 
													Palestinian Territory, Occupied 
													Panama 
													Papua New Guinea 
													Paraguay 
													Peru 
													Philippines 
													Poland 
													Portugal 
													Puerto Rico 
													Qatar 
													Romania 
													Russian Federation 
													Rwanda 
													Saint Barthélemy 
													Saint Kitts and Nevis 
													Saint Lucia 
													Saint Martin (French part) 
													Saint Vincent and the Grenadines 
													Samoa 
													San Marino 
													Sao Tome and Principe 
													Saudi Arabia 
													Senegal 
													Serbia 
													Seychelles 
													Sierra Leone 
													Singapore 
													Sint Maarten (Dutch part) 
													Slovakia 
													Slovenia 
													Solomon Islands 
													Somalia 
													South Africa 
													South Korea 
													South Sudan 
													Spain 
													Sri Lanka 
													Sudan 
													Suriname 
													Swaziland 
													Sweden 
													Switzerland 
													Syrian Arab Republic 
													Taiwan, Province of China 
													Tajikistan 
													Tanzania, United Republic of 
													Thailand 
													Togo 
													Tokelau 
													Tonga 
													Trinidad and Tobago 
													Tunisia 
													Turkey 
													Turkmenistan 
													Turks and Caicos Islands 
													Tuvalu 
													Uganda 
													Ukraine 
													United Arab Emirates 
													United Kingdom 
													United States 
													Uruguay 
													Uzbekistan 
													Vanuatu 
													Venezuela, Bolivarian Republic of 
													Vietnam 
													Virgin Islands 
													Yemen 
													Zambia 
													Zimbabwe 
												 
											
										 
										
										
										
											
											
												copy 
												
												
													
														
															
// Format options
var optionFormat = function(item) {
    if ( !item.id ) {
        return item.text;
    }
    var span = document.createElement('span');
    var imgUrl = item.element.getAttribute('data-kt-select2-country');
    var template = '';
    template += '<img src="' + imgUrl + '" class="rounded-circle h-20px me-2" alt="image"/>';
    template += item.text;
    span.innerHTML = template;
    return $(span);
}
// Init Select2 --- more info: https://select2.org/
$('#kt_docs_select2_country').select2({
    templateSelection: optionFormat,
    templateResult: optionFormat
});
 
														 
													 
													
														
															
<div class="form-floating border rounded">
    <select class="form-select form-select-transparent" placeholder="..." id="kt_docs_select2_country">
        <option></option>
        <option value="AF" data-kt-select2-country="assets/media/flags/afghanistan.svg">Afghanistan</option>
        <option value="AX" data-kt-select2-country="assets/media/flags/aland-islands.svg">Aland Islands</option>
        ...
    </select>
    <label for="kt_docs_select2_country">Select a country</label>
</div>
 
														 
													 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Initialize Select2 programmatically and add
										data-kt-select2-userattribute with the path to the user avatar to create a list with user portraits.
										
										
										
											
												Select a user 
												
													Emma Smith 
													Max Smith 
													Sean Bean 
													Brian Cox 
													Francis Mitcham 
													Dan Wilson 
													Ana Crown 
													John Miller 
													Ethan Wilder 
												 
											
										 
										
										
										
											
											
												copy 
												
												
													
														
															
// Format options
var optionFormat = function(item) {
    if ( !item.id ) {
        return item.text;
    }
    var span = document.createElement('span');
    var imgUrl = item.element.getAttribute('data-kt-select2-user');
    var template = '';
    template += '<img src="' + imgUrl + '" class="rounded-circle h-20px me-2" alt="image"/>';
    template += item.text;
    span.innerHTML = template;
    return $(span);
}
// Init Select2 --- more info: https://select2.org/
$('#kt_docs_select2_country').select2({
    templateSelection: optionFormat,
    templateResult: optionFormat
});
 
														 
													 
													
														
															
<div class="form-floating border rounded">
    <select class="form-select form-select-transparent" data-placeholder="..." id="kt_docs_select2_users">
        <option></option>
        <option value="0" data-kt-select2-user="assets/media/avatars/300-6.jpg">Emma Smith</option>
        <option value="1" data-kt-select2-user="assets/media/avatars/300-1.jpg">Max Smith</option>
        ...
    </select>
    <label for="kt_docs_select2_users">Select a user</label>
</div>
 
														 
													 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Initialize Select2 programmatically and add
										data-kt-rich-content-iconattribute with the path to the user avatar to create a list with user portraits. Additionally, add
										data-kt-rich-content-subcontentattribute to include additional sub content elements.
										
										
										
											
												Select an option 
												
												
													Emma Smith 
													Max Smith 
													Sean Bean 
													Brian Cox 
												 
												
											
										 
										
										
										
											
											
												copy 
												
												
													
														
															
// Format options
const optionFormat = (item) => {
    if (!item.id) {
        return item.text;
    }
    var span = document.createElement('span');
    var template = '';
    template += '<div class="d-flex align-items-center">';
    template += '<img src="' + item.element.getAttribute('data-kt-rich-content-icon') + '" class="rounded-circle h-40px me-3" alt="' + item.text + '"/>';
    template += '<div class="d-flex flex-column">'
    template += '<span class="fs-4 fw-bolder lh-1">' + item.text + '</span>';
    template += '<span class="text-muted fs-5">' + item.element.getAttribute('data-kt-rich-content-subcontent') + '</span>';
    template += '</div>';
    template += '</div>';
    span.innerHTML = template;
    return $(span);
}
// Init Select2 --- more info: https://select2.org/
$('#kt_docs_select2_rich_content').select2({
    placeholder: "Select an option",
    minimumResultsForSearch: Infinity,
    templateSelection: optionFormat,
    templateResult: optionFormat
});
 
														 
													 
													
														
															
<div class="border rounded">
<select id="kt_docs_select2_rich_content" class="form-select form-select-transparent" name="..." data-placeholder="...">
        <option></option>
        <option value="0" data-kt-rich-content-subcontent="..." data-kt-rich-content-icon="assets/media/avatars/300-6.jpg">Option Label 1</option>
        <option value="1" data-kt-rich-content-subcontent="..." data-kt-rich-content-icon="assets/media/avatars/300-6.jpg">Option Label 1</option>
        ...
    </select>
</div>
 
														 
													 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Use Select2 with Bootstrap Floating Labels:
										
										
										
											
												
												
													
														Bitcoin/BTC 
														Ethereum/ETH 
														Filecoin/FLE 
														Chainlink/CIN 
														Binance/BCN 
													 
													Coin Name 
												
												
												
												
													
														Bitcoin/BTC 
														Ethereum/ETH 
														Filecoin/FLE 
														Chainlink/CIN 
														Binance/BCN 
													 
													Coin Name 
												
												
											 
										 
										
										
										
											
											
												copy 
												
												
													
														
															
<!--begin::Input group-->
<div class="form-floating border rounded mb-7">
    <select class="form-select form-select-transparent" id="kt_docs_select2_floating_labels_1">
        <option></option>
    </select>
    <label>Coin Name</label>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="form-floating form-control-solid-bg rounded">
    <select class="form-select form-select-transparent" id="kt_docs_select2_floating_labels_2" data-allow-clear="true">
        <option></option>
    </select>
    <label for="floatingInputValue">Coin Name</label>
</div>
<!--end::Input group-->
 
														 
													 
													
														
															
var optionFormat = function(item) {
    if ( !item.id ) {
        return item.text;
    }
    var span = document.createElement('span');
    var template = '';
    template += '<img src="' + item.element.getAttribute('data-kt-select2-image') + '" class="rounded-circle h-20px me-2" alt="image"/>';
    template += item.text;
    span.innerHTML = template;
    return $(span);
}
// Init Select2 --- more info: https://select2.org/
$('#kt_docs_select2_floating_labels_1').select2({
    placeholder: "Select coin",
    minimumResultsForSearch: Infinity,
    templateSelection: optionFormat,
    templateResult: optionFormat
});
// Init Select2 --- more info: https://select2.org/
$('#kt_docs_select2_floating_labels_2').select2({
    placeholder: "Select coin",
    minimumResultsForSearch: Infinity,
    templateSelection: optionFormat,
    templateResult: optionFormat
});
 
														 
													 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										
										
										
										
										
										
										
											
											
												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>