Advance Select
Phoenix uses Choices.js for advance select. Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency
Documentation for ChoicesMultiple Select Example
<label for="organizerMultiple">Multiple</label>
<select class="form-select" id="organizerMultiple" data-choices="data-choices" multiple="multiple" data-options='{"removeItemButton":true,"placeholder":true}'>
<option value="">Select organizer...</option>
<option>Massachusetts Institute of Technology</option>
<option>University of Chicago</option>
<option>GSAS Open Labs At Harvard</option>
<option>California Institute of Technology</option>
</select>Single Select Example
<label for="organizerSingle">Single</label>
<select class="form-select" id="organizerSingle" data-choices="data-choices" data-options='{"removeItemButton":true,"placeholder":true}'>
<option value="">Select organizer...</option>
<option>Massachusetts Institute of Technology</option>
<option>University of Chicago</option>
<option>GSAS Open Labs At Harvard</option>
<option>California Institute of Technology</option>
</select>Floating label Example
<div class="form-floating form-floating-advance-select mb-3">
<label for="floaTingLabelSingleSelect">Single</label>
<select class="form-select" id="floaTingLabelSingleSelect" data-choices="data-choices" data-options='{"removeItemButton":true,"placeholder":true}'>
<option>Massachusetts Institute of Technology</option>
<option>University of Chicago</option>
<option>GSAS Open Labs At Harvard</option>
<option>California Institute of Technology</option>
</select>
</div>
<div class="form-floating form-floating-advance-select">
<label for="floaTingLabelMultipleSelect">Multiple</label>
<select class="form-select" id="floaTingLabelMultipleSelect" data-choices="data-choices" multiple="multiple" data-options='{"removeItemButton":true,"placeholder":true}'>
<option selected="selected">Massachusetts Institute of Technology</option>
<option>University of Chicago</option>
<option>GSAS Open Labs At Harvard</option>
<option>California Institute of Technology</option>
</select>
</div>Validation Example
<form class="needs-validation" novalidate="novalidate">
<div class="mb-3">
<label for="organizerMultiple2">Multiple</label>
<select class="form-select" id="organizerMultiple2" data-choices="data-choices" multiple="multiple" size="1" name="organizerMultiple" required="required" data-options='{"removeItemButton":true,"placeholder":true}'>
<option value="">Select organizer...</option>
<option>Massachusetts Institute of Technology</option>
<option>University of Chicago</option>
<option>GSAS Open Labs At Harvard</option>
<option>California Institute of Technology</option>
</select>
<div class="invalid-feedback">Please select one or multiple</div>
</div>
<div class="mb-3">
<label for="organizerSingle2">Single</label>
<select class="form-select" id="organizerSingle2" data-choices="data-choices" size="1" required="required" name="organizerSingle" data-options='{"removeItemButton":true,"placeholder":true}'>
<option value="">Select organizer...</option>
<option>Massachusetts Institute of Technology</option>
<option>University of Chicago</option>
<option>GSAS Open Labs At Harvard</option>
<option>California Institute of Technology </option>
</select>
<div class="invalid-feedback">Please select one</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>Stylesheet
<pre><code class="language-html"><link href="vendors/choices/choices.min.css" rel="stylesheet" /></code></pre><link href="vendors/choices/choices.min.css" rel="stylesheet" />Javascript
<pre><code class="language-html"><script src="vendors/choices/choices.min.js"></script></code></pre><script src="vendors/choices/choices.min.js"></script>
