Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="./node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./node_modules/tom-select/dist/js/tom-select.complete.min.js">
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script>
// INITIALIZATION OF SELECT
new TomSelect(".js-select");
</script>
<div class="tom-select-custom">
<select class="js-select form-select" autocomplete="off"
data-hs-tom-select-options='{
"placeholder": "Select a person...",
"hideSearch": true
}'>
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<div class="input-group">
<input type="text" class="form-control" name="fullName"
placeholder="Search name or emails" aria-label="Search name or emails"
aria-describedby="fullName">
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select" autocomplete="off"
data-hs-tom-select-options='{
"dropdownWidth": "300px",
"dropdownLeft": true
}'>
<option value="4" selected>Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<!-- End Select -->
<a class="btn btn-primary" href="javascript:;">Invite</a>
</div>
<div class="tom-select-custom tom-select-custom-with-tags">
<select class="js-select form-select" autocomplete="off" multiple
data-hs-tom-select-options='{
"placeholder": "Select a person..."
}'>
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<div class="tom-select-custom">
<select class="js-select form-select" autocomplete="off" multiple
data-hs-tom-select-options='{
"singleMultiple": true,
"hideSelected": false,
"placeholder": "Select user"
}'>
<option value="">Select a person...</option>
<option value="4" selected>Thomas Edison</option>
<option value="1" selected>Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<div class="tom-select-custom">
<select class="js-select form-select" autocomplete="off"
data-hs-tom-select-options='{
"placeholder": "Select a person..."
}'>
<option value="">Select gear...</option>
<optgroup label="Climbing">
<option value="pitons">Pitons</option>
<option value="cams">Cams</option>
<option value="nuts">Nuts</option>
<option value="bolts">Bolts</option>
<option value="stoppers">Stoppers</option>
<option value="sling">Sling</option>
</optgroup>
<optgroup label="Skiing">
<option value="skis">Skis</option>
<option value="skins">Skins</option>
<option value="poles">Poles</option>
</optgroup>
</select>
</div>