Input group

eCommerce input group

Input group component dedicated to building eCommerce projects.


Basic example

@
@example.com


        <div class="md-form md-outline input-group">
          <div class="input-group-prepend">
            <span class="input-group-text md-addon" id="material-addon1">@</span>
          </div>
          <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="material-addon1">
        </div>
        
        <div class="md-form md-outline input-group">
          <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"
            aria-describedby="material-addon2">
          <div class="input-group-append">
            <span class="input-group-text md-addon" id="material-addon2">@example.com</span>
          </div>
        </div>

      

Advanced example



        <div class="md-form md-outline input-group md-input-group w-100">

          <div class="select-outline">
            <select class="mdb-select md-form md-outline my-0">
              <option value="">All type</option>
              <option value="codex">Special</option>
              <option value="comments">Only best</option>
              <option value="content">Latest</option>
            </select>
          </div>

          <input type="text" class="form-control mb-0" placeholder="Search">

          <div class="input-group-append">
            <button class="btn btn-primary btn-md px-3" type="submit">
              <i class="fa fa-search"></i> Search
            </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');
          });
        });