-
-
-
-
-
-
-
Helen Walter
Admin
Input Group
ADMIN PANELGroup 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>


