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

Thank you for creating with Falcon |
2023 © Themewagon

v3.17.0

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