Input
- Home
- Forms
- 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">
English
Espanol
Japanese