<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="page"> <div class="navbar"> <div class="navbar-inner sliding"> <div class="left"> <a class="link back"> <i class="icon icon-back"></i> <span class="ios-only">Back</span> </a> </div> <div class="title">Smart Select</div> </div> </div> <div class="page-content"> <div class="block"> Framework7 allows you to easily convert your usual form selects to dynamic pages with radios: </div> <div class="list"> <ul> <li> <a class="item-link smart-select smart-select-init" data-open-in="popup" data-searchbar="true" data-searchbar-placeholder="Search car"> <select name="car" multiple> <optgroup label="Japanese"> <option value="honda" selected>Honda</option> <option value="lexus">Lexus</option> <option value="mazda">Mazda</option> <option value="nissan">Nissan</option> <option value="toyota">Toyota</option> </optgroup> <optgroup label="German"> <option value="audi" selected>Audi</option> <option value="bmw">BMW</option> <option value="mercedes">Mercedes</option> <option value="vw">Volkswagen</option> <option value="volvo">Volvo</option> </optgroup> <optgroup label="American"> <option value="cadillac">Cadillac</option> <option value="chrysler">Chrysler</option> <option value="dodge">Dodge</option> <option value="ford" selected>Ford</option> </optgroup> </select> <div class="item-content"> <div class="item-inner"> <div class="item-title">Car</div> </div> </div> </a> </li> </ul> </div> </div> </div>