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

Multiple 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>
Please select one or multiple
Please select one

Stylesheet

<pre><code class="language-html">&lt;link href=&quot;vendors/choices/choices.min.css&quot; rel=&quot;stylesheet&quot; /&gt;</code></pre>
<link href="vendors/choices/choices.min.css" rel="stylesheet" />

Javascript

<pre><code class="language-html">&lt;script src=&quot;vendors/choices/choices.min.js&quot;&gt;&lt;/script&gt;</code></pre>
<script src="vendors/choices/choices.min.js"></script>

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.19.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize