List.js

Create searchable, sortable, and filterable lists and tables with the simple but powerful List.js plugin.
Plugin documentation

  • data-toggle="lists" - initializes the plugin.
  • data-options - plugin options.
<div data-toggle="lists" data-options='{"valueNames": ["name"]}'>

    <!-- Input group -->
    <div class="input-group input-group-merge mb-6">
      <input class="form-control form-control-xs search" type="search" placeholder="Search Brand">

      <!-- Button -->
      <div class="input-group-append">
        <button class="btn btn-outline-border btn-xs">
          <i class="fe fe-search"></i>
        </button>
      </div>

    </div>

    <!-- Form group -->
    <div class="form-group form-group-overflow mb-0" id="brandGroup">
      <div class="list">
        <div class="custom-control custom-checkbox mb-3">
          <input class="custom-control-input" id="brandOne" type="checkbox">
          <label class="custom-control-label name" for="brandOne">
            Dsquared2
          </label>
        </div>
        <div class="custom-control custom-checkbox mb-3">
          <input class="custom-control-input" id="brandTwo" type="checkbox" disabled>
          <label class="custom-control-label name" for="brandTwo">
            Alexander McQueen
          </label>
        </div>
        <div class="custom-control custom-checkbox mb-3">
          <input class="custom-control-input" id="brandThree" type="checkbox">
          <label class="custom-control-label name" for="brandThree">
            Balenciaga
          </label>
        </div>
      </div>
    </div>

  </div>