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 Choices<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>California Institute of Technology
GSAS Open Labs At Harvard
Massachusetts Institute of Technology
University of Chicago
<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>Select organizer...
Select organizer...
California Institute of Technology
GSAS Open Labs At Harvard
Massachusetts Institute of Technology
University of Chicago
<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>Massachusetts Institute of Technology
California Institute of Technology
GSAS Open Labs At Harvard
Massachusetts Institute of Technology
University of Chicago
Massachusetts Institute of Technology
California Institute of Technology
GSAS Open Labs At Harvard
University of Chicago
<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><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" />
