### Advance Select

Falcon 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

From Falcon `3.13.0` we are intruducing advance selects using jQuery Select2.

Select2 components

##### Multiple Select Example

Multiple

    <label for="organizerMultiple">Multiple</label>
    <select class="form-select js-choice" id="organizerMultiple" multiple="multiple" size="1" name="organizerMultiple" 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

Single

    <label for="organizerSingle">Single</label>
    <select class="form-select js-choice" id="organizerSingle" size="1" 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>

##### Validation Example

Multiple
Please select one or multiple
Single
Please select one

    <form class="needs-validation" novalidate="novalidate">
      <div class="mb-3">
        <label for="organizerMultiple2">Multiple</label>
        <select class="form-select js-choice" id="organizerMultiple2" 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 js-choice" id="organizerSingle2" 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

    <link href="vendors/choices/choices.min.css" rel="stylesheet" />

##### Javascript

    <script src="vendors/choices/choices.min.js"></script>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### Settings

Set your own customized style

##### Color Scheme

Choose the perfect color mode for your app.

##### RTL Mode

Switch your language direction

RTL Documentation

##### Fluid Layout

Toggle container layout system

Fluid Documentation

##### Navigation Position

Select a suitable navigation system for your web application

##### Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

##### Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize