Input

  1. Home
  2. Forms
  3. Input
Floating labels

<!--:Floating input wrapper:-->
<div class="floating-label relative">
  <input type="text" id="fname" class="peer" placeholder="" />
  <label for="fname">Default</label>
</div>
Sizing

<input type="text" class="input input-sm" placeholder="Input Small">
<input type="text" class="input" placeholder="Input Default">
<input type="text" class="input input-lg" placeholder="Input Large">
Icon

<!--Small-->
<div class="relative">
    <input type="text" class="input input-sm !pl-8 peer" name="input-sm" placeholder="Input Default">
    <span class="icon-[lucide--circle-user] pointer-events-none absolute text-base left-3 top-1/2 -translate-y-1/2 text-stone-400 peer-focus:text-primary"></span>
</div>

<!--Default-->
<div class="relative">
    <input type="text" class="input !pl-9 peer" name="input-default" placeholder="Input Default">
    <span class="icon-[lucide--circle-user] pointer-events-none absolute text-lg left-3 top-1/2 -translate-y-1/2 text-stone-400 peer-focus:text-primary"></span>
</div>

<!--Large-->
<div class="relative">
    <input type="text" class="input input-lg !pl-10 peer" name="input-lg" placeholder="Input Default">
    <span class="icon-[lucide--circle-user] pointer-events-none absolute text-xl left-3 top-1/2 -translate-y-1/2 text-stone-400 peer-focus:text-primary"></span>
</div>
Disabled & readonly

<input type="text" class="input" placeholder="Input Disabled" disabled>
<input type="text" class="input pointer-events-none" placeholder="Input Readonly" readonly>
Form text examples

Must be 6–20 characters, letters and numbers only.


Must be 6–20 characters, letters and numbers only.



 <label for="userName1" class="block mb-0.5">Username </label>
 <input type="email" id="userName1" class="input">
  <!--:form text:-->
 <p class="mt-0.5 text-xs text-stone-400">Must be 6–20 characters, letters and numbers only. </p>

 <div class="mb-0 5 flex items-center gap-2">
  <label for="username" class="block">Username </label>
  <span class="block cursor-pointer leading-none" data-bs-toggle="popover"
     data-bs-placement="right" data-bs-content="Must be 6–20 characters, letters and numbers only.">
     <span class="icon-[lucide--info]"> </span>
   </span>
 </div>
 <input type="text" id="username" class="input">