.input
class allows you to set quick and default input style.
.input
for default size input field.input-xs
for small size input field.input-md
for medium size input field.input-lg
for large size input field<input type="text" class=" input-xs" placeholder="First Name">
<input type="text" class="input" placeholder="First Name">
<input type="text" class=" input-md" placeholder="First Name">
<input type="text" class=" input-lg" placeholder="First Name">
.full
or .half
class for 100% or 50% width.
<input type="text" class="input full" placeholder="First Name">
<input type="text" class="input half" placeholder="First Name">
Just add disabled attribute to make field disable
<input type="text" class="input" placeholder="First Name" disabled>
To make border round use border radius shorthand .br-round
<input type="text" class="input br-round" placeholder="First Name">
<div class="input-wrapper">
<span class="input-icon"><i data-feather="user" class="w-5 h-5"></i></span>
<input type="text" class="input bw-0 pl-0" placeholder="First Name">
</div>
To add shadow use shadow shorthand like .shadow
or .shadow-1
<input type="text" class="input shadow" placeholder="First Name">
To add the color add shorthand classes for border color, text color, placeholder color and focus color.
<input type="text" class="input focus-indigo border-indigo indigo ph-indigo-lighter" placeholder="First Name">