Input Group

ADMIN PANEL

Group label left

You can use label left as code show bellow

<div class="form-control">
  <label class="label">
     <span class="label-text">Your Email</span>
  </label>
  <label class="input-group">
     <span class="bg-gray-300 dark:bg-light">Email</span>
     <input type="text"dark:bg-dark-dense placeholder="info@site.com" class="bg-white border-none input" />
  </label>
</div> 

Group Label Right

You can use group label right as code show bellow

<div class="form-control">
  <label class="label">
     <span class="label-text">Enter amount</span>
  </label>
  <label class="input-group">
     <input  type="text" placeholder="0.01" class="bg-white border-none dark:bg-dark-dense input" />
     <span class="bg-gray-300 dark:bg-light">BTC</span>
  </label>
</div> 

Group Label Both Side

You can use group label both side as code show bellow

 <div class="form-control">
  <label class="label">
     <span class="label-text">Enter amount</span>
  </label>
  <label class="input-group">
     <span class="dark:bg-light">Price</span>
     <input type="text" placeholder="10" class="bg-white border-none dark:bg-dark-dense input" />
     <span class="bg-gray-300 dark:bg-light">USD</span>
  </label>
</div> 

Group Label Vertical

You can use group label vertical as code show bellow

 <div class="form-control">
  <label class="label">
     <span class="label-text">Your Email</span>
  </label>
  <label class="input-group input-group-vertical">
     <span class="bg-gray-300">Email</span>
     <input type="text" placeholder="info@site.com" class="bg-white border-none input" />
  </label>
</div>   

Group With different Size

You can use group with different size as code show bellow .input-group-(lg, md, sm, xs) classes

 <!-- lg -->
<div class="form-control">
  <label class="input-group input-group-lg">
     <span class="bg-gray-300 dark:bg-light">LG</span>
     <input type="text" placeholder="Type here" class="bg-white border-none dark:bg-dark-dense input input-lg" />
  </label>
  </div>
 
<!-- md -->
<div class="form-control">
  <label class="input-group input-group-md">
     <span class="bg-gray-300 dark:bg-light" >MD</span>
     <input type="text" placeholder="Type here" class="bg-white border-none dark:bg-dark-dense input input-md" />
  </label>
  </div>
 
<!-- sm -->
<div class="form-control">
  <label class="input-group input-group-sm">
     <span class="bg-gray-300 dark:bg-light" >SM</span>
     <input type="text" placeholder="Type here" class="bg-white border-none dark:bg-dark-dense input input-sm" />
  </label>
  </div>
 
<!-- xs -->
<div class="form-control">
  <label class="input-group input-group-xs">
     <span class="bg-gray-300 dark:bg-light" >XS</span>
     <input type="text" placeholder="Type here" class="bg-white border-none dark:bg-dark-dense input input-xs" />
  </label>
</div> 

Group Label Vertical

You can use group label vertical as code show bellow

 <!-- group button --> 
<div class="form-control">
 <div class="input-group">
    <input type="text" placeholder="Search…" class="bg-white border-none input" />
    <button class="dark:bg-light btn btn-square">
       <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
    </button>
 </div>
</div>                
              
<!-- select and button -->
<div class="form-control">
 <div class="input-group">
    <select class="select select-bordered">
       <option disabled selected bg-gray-300>Pick category</option>
       <option>T-shirts</option>
       <option>Mugs</option>
    </select>
    <button class="bg-gray-300 dark:bg-light btn">Go</button>
 </div>
</div>                
Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Buy Now