Edit these docs

Select

eCommerce select

Select components dedicated to building eCommerce projects.

Regular select 



        <div class="d-flex flex-wrap">
          <div class="select-outline position-relative w-100">
            <select class="mdb-select md-form md-outline">
              <option value="" disabled selected>Choose your option</option>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
              <option value="3">Option 3</option>
            </select>
            <label>Example label</label>
          </div>
        </div>

      


        $(document).ready(function () {
          $('.mdb-select').materialSelect();
          $('.select-wrapper.md-form.md-outline input.select-dropdown').bind('focus blur', function () {
            $(this).closest('.select-outline').find('label').toggleClass('active');
            $(this).closest('.select-outline').find('.caret').toggleClass('active');
          });
        });

Multi-select 



        <div class="d-flex flex-wrap">
          <div class="select-outline position-relative w-100">
        
            <select class="mdb-select md-outline md-form" multiple searchable="Search here..">
              <option value="" disabled selected>Choose your country</option>
              <option value="1">USA</option>
              <option value="2">Germany</option>
              <option value="3">France</option>
              <option value="4">Poland</option>
              <option value="5">Japan</option>
            </select>
            <label>Label example</label>
            <button class="btn-save btn btn-primary btn-sm mt-2">Save</button>
        
          </div>
        </div>

      


        $(document).ready(function () {
          $('.mdb-select').materialSelect();
          $('.select-wrapper.md-form.md-outline input.select-dropdown').bind('focus blur', function () {
            $(this).closest('.select-outline').find('label').toggleClass('active');
            $(this).closest('.select-outline').find('.caret').toggleClass('active');
          });
        });

Disabled 



        <div class="d-flex flex-wrap">
          <div class="select-outline position-relative w-100">
            <select class="mdb-select md-form md-outline" disabled>
              <option value="" disabled selected>Choose your option</option>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
              <option value="3">Option 3</option>
            </select>
            <label class="disabled">Example label</label>
          </div>
        </div>

      


        $(document).ready(function () {
          $('.mdb-select').materialSelect();
          $('.select-wrapper.md-form.md-outline input.select-dropdown').bind('focus blur', function () {
            $(this).closest('.select-outline').find('label').toggleClass('active');
            $(this).closest('.select-outline').find('.caret').toggleClass('active');
          });
        });

Searchable 



        <div class="d-flex flex-wrap">
          <div class="select-outline position-relative w-100">
            <select class="mdb-select md-form md-outline"  searchable="Search here..">
              <option value="" disabled selected>Choose your option</option>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
              <option value="3">Option 3</option>
            </select>
            <label>Example label</label>
          </div>
        </div>

      


        $(document).ready(function () {
          $('.mdb-select').materialSelect();
          $('.select-wrapper.md-form.md-outline input.select-dropdown').bind('focus blur', function () {
            $(this).closest('.select-outline').find('label').toggleClass('active');
            $(this).closest('.select-outline').find('.caret').toggleClass('active');
          });
        });