## 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>

Multiple

#### 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>

Single

#### 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>

Single
Multiple

#### 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>

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

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize