Input

.input class allows you to set quick and default input style.

Size

.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">

Width

Use .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">

Disabled

Just add disabled attribute to make field disable

<input type="text" class="input" placeholder="First Name" disabled>

Round

To make border round use border radius shorthand .br-round

<input type="text" class="input br-round" placeholder="First Name">

Icon

<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>

Shadow

To add shadow use shadow shorthand like .shadow or .shadow-1

<input type="text" class="input shadow" placeholder="First Name">

Color

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">