Tail Select

Basic Select

Show example code

Basic

Leonardo DiCaprio

Nested

Leonardo DiCaprio

                                      <div> <label>Basic</label>
     <div class="mt-2"> <select data-search="true" class="tail-select w-full">
             <option value="1">Leonardo DiCaprio</option>
             <option value="2">Johnny Deep</option>
             <option value="3">Robert Downey, Jr</option>
             <option value="4">Samuel L. Jackson</option>
             <option value="5">Morgan Freeman</option>
         </select> </div>
 </div>
 <div class="mt-3"> <label>Nested</label>
     <div class="mt-2"> <select data-search="true" class="tail-select w-full">
             <optgroup label="American Actors">
                 <option value="1">Leonardo DiCaprio</option>
                 <option value="2">Johnny Deep</option>
                 <option value="3">Robert Downey, Jr</option>
                 <option value="4">Samuel L. Jackson</option>
                 <option value="5">Morgan Freeman</option>
             </optgroup>
             <optgroup label="American Actresses">
                 <option value="1">Scarlett Johansson</option>
                 <option value="2">Jessica Alba</option>
                 <option value="3">Jennifer Lawrence</option>
                 <option value="4">Emma Stone</option>
                 <option value="5">Angelina Jolie</option>
             </optgroup>
         </select> </div>
 </div> 
                                

Multi Select

Show example code

Leonardo DiCaprio

Robert Downey, Jr

                                      <select data-placeholder="Select your favorite actors" data-search="true" class="tail-select w-full" multiple>
     <option value="1" selected>Leonardo DiCaprio</option>
     <option value="2">Johnny Deep</option>
     <option value="3" selected>Robert Downey, Jr</option>
     <option value="4">Samuel L. Jackson</option>
     <option value="5">Morgan Freeman</option>
 </select> 
                                

Input Group

Show example code

Leonardo DiCaprio

                                      <div class="flex">
     <div class="z-30 rounded-l w-10 flex items-center justify-center bg-gray-100 border text-gray-600 dark:bg-dark-1 dark:border-dark-4 -mr-1">@</div> <select data-search="true" class="tail-select w-full">
         <option value="1">Leonardo DiCaprio</option>
         <option value="2">Johnny Deep</option>
         <option value="3">Robert Downey, Jr</option>
         <option value="4">Samuel L. Jackson</option>
         <option value="5">Morgan Freeman</option>
     </select>
 </div> 
                                

Hiding Search Box

Show example code

Leonardo DiCaprio

                                      <select class="tail-select w-full">
     <option value="1">Leonardo DiCaprio</option>
     <option value="2">Johnny Deep</option>
     <option value="3">Robert Downey, Jr</option>
     <option value="4">Samuel L. Jackson</option>
     <option value="5">Morgan Freeman</option>
 </select> 
                                