Select2

Basic Select

Show code

Basic

Nested

                                      <div> <label>Basic</label>
     <div class="mt-2"> <select class="select2 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 class="select2 block w-full border mt-2">
             <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 code

                                      <select data-placeholder="Select your favorite actors" class="select2 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 code

                                      <div class="flex">
     <div class="z-10 rounded-l w-10 flex items-center justify-center bg-gray-100 border text-gray-600 -mr-1">@</div> <select class="select2 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 code

                                      <select data-hide-search="true" class="select2 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> 
                                