Inputs
Examples of how to build input components
Elements CSS doesn’t include pre-designed components out of the box, but they’re easy to build using existing utilities.
Inputs should be consistent across all Q-CTRL’s products as such they should follow the guidelines in Elements Design Library. The follow examples show you how to acheive this using Elements CSS utility classes.
# Sizes
Inputs come in five different sizes, Extra Small, Small, Medium, Large, Extra Large
<!-- Extra Small -->
<div class="relative group rounded-xs ">
<input type="text" name="text" id="text" class="block w-full text-xs rounded-xs shadow-inner-sm py-0.5 pl-3 pr-3 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="Extra Small" value="jesse.henderson" >
</div>
<!-- Small -->
<div class="relative group rounded-xs ">
<input type="text" name="text" id="text" class="block w-full text-sm rounded-xs shadow-inner-sm py-1 pl-3.5 pr-3.5 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="Extra Small" value="jesse.henderson" >
</div>
<!-- Medium -->
<div class="relative group rounded-sm ">
<input type="text" name="text" id="text" class="block w-full text-base rounded-sm shadow-inner-sm py-1 pl-4 pr-4 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="Extra Small" value="jesse.henderson" >
</div>
<!-- Large -->
<div class="relative group rounded ">
<input type="text" name="text" id="text" class="block w-full text-base rounded shadow-inner-sm py-2 pl-5 pr-5 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="Extra Small" value="jesse.henderson" >
</div>
<!-- Extra Large -->
<div class="relative group rounded ">
<input type="text" name="text" id="text" class="block w-full text-lg rounded shadow-inner-sm py-2.5 pl-6 pr-6 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="Extra Small" value="jesse.henderson" >
</div># Input Icons
Icons can be added to the left and right of an input.
Note: The .pl-* and .pr-* classes change when there are left and right icons
<!-- Extra Small -->
<div class="relative group rounded-xs ">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="w-3 h-3 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M15.5,12C18,12 20,14 20,16.5C20,17.38 19.75,18.21 19.31,18.9L22.39,22L21,23.39L17.88,20.32C17.19,20.75 16.37,21 15.5,21C13,21 11,19 11,16.5C11,14 13,12 15.5,12M15.5,14A2.5,2.5 0 0,0 13,16.5A2.5,2.5 0 0,0 15.5,19A2.5,2.5 0 0,0 18,16.5A2.5,2.5 0 0,0 15.5,14M10,4A4,4 0 0,1 14,8C14,8.91 13.69,9.75 13.18,10.43C12.32,10.75 11.55,11.26 10.91,11.9L10,12A4,4 0 0,1 6,8A4,4 0 0,1 10,4M2,20V18C2,15.88 5.31,14.14 9.5,14C9.18,14.78 9,15.62 9,16.5C9,17.79 9.38,19 10,20H2Z" /></svg>
</div>
<input type="text" name="text" id="text" class="block w-full text-xs rounded-xs shadow-inner-sm py-0.5 pl-8 pr-8 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="Extra Small" value="jesse.henderson" >
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<svg class="w-3 h-3 text-gray-400" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg>
</div>
</div>
<!-- Small -->
<div class="relative group rounded-xs ">
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
<svg class="w-4.5 h-4.5 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M15.5,12C18,12 20,14 20,16.5C20,17.38 19.75,18.21 19.31,18.9L22.39,22L21,23.39L17.88,20.32C17.19,20.75 16.37,21 15.5,21C13,21 11,19 11,16.5C11,14 13,12 15.5,12M15.5,14A2.5,2.5 0 0,0 13,16.5A2.5,2.5 0 0,0 15.5,19A2.5,2.5 0 0,0 18,16.5A2.5,2.5 0 0,0 15.5,14M10,4A4,4 0 0,1 14,8C14,8.91 13.69,9.75 13.18,10.43C12.32,10.75 11.55,11.26 10.91,11.9L10,12A4,4 0 0,1 6,8A4,4 0 0,1 10,4M2,20V18C2,15.88 5.31,14.14 9.5,14C9.18,14.78 9,15.62 9,16.5C9,17.79 9.38,19 10,20H2Z" /></svg>
</div>
<input type="text" name="text" id="text" class="block w-full text-sm rounded-xs shadow-inner-sm py-1 pl-10 pr-10 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="Extra Small" value="jesse.henderson" >
<div class="absolute inset-y-0 right-0 pr-3.5 flex items-center pointer-events-none">
<svg class="w-4.5 h-4.5 text-gray-400" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg>
</div>
</div>
<!-- Medium -->
<div class="relative group rounded-sm ">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<svg class="w-6 h-6 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M15.5,12C18,12 20,14 20,16.5C20,17.38 19.75,18.21 19.31,18.9L22.39,22L21,23.39L17.88,20.32C17.19,20.75 16.37,21 15.5,21C13,21 11,19 11,16.5C11,14 13,12 15.5,12M15.5,14A2.5,2.5 0 0,0 13,16.5A2.5,2.5 0 0,0 15.5,19A2.5,2.5 0 0,0 18,16.5A2.5,2.5 0 0,0 15.5,14M10,4A4,4 0 0,1 14,8C14,8.91 13.69,9.75 13.18,10.43C12.32,10.75 11.55,11.26 10.91,11.9L10,12A4,4 0 0,1 6,8A4,4 0 0,1 10,4M2,20V18C2,15.88 5.31,14.14 9.5,14C9.18,14.78 9,15.62 9,16.5C9,17.79 9.38,19 10,20H2Z" /></svg>
</div>
<input type="text" name="text" id="text" class="block w-full text-base rounded-sm shadow-inner-sm py-1 pl-12 pr-12 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="Extra Small" value="jesse.henderson" >
<div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
<svg class="w-6 h-6 text-gray-400" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg>
</div>
</div>
<!-- Large -->
<div class="relative group rounded ">
<div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
<svg class="w-7 h-7 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M15.5,12C18,12 20,14 20,16.5C20,17.38 19.75,18.21 19.31,18.9L22.39,22L21,23.39L17.88,20.32C17.19,20.75 16.37,21 15.5,21C13,21 11,19 11,16.5C11,14 13,12 15.5,12M15.5,14A2.5,2.5 0 0,0 13,16.5A2.5,2.5 0 0,0 15.5,19A2.5,2.5 0 0,0 18,16.5A2.5,2.5 0 0,0 15.5,14M10,4A4,4 0 0,1 14,8C14,8.91 13.69,9.75 13.18,10.43C12.32,10.75 11.55,11.26 10.91,11.9L10,12A4,4 0 0,1 6,8A4,4 0 0,1 10,4M2,20V18C2,15.88 5.31,14.14 9.5,14C9.18,14.78 9,15.62 9,16.5C9,17.79 9.38,19 10,20H2Z" /></svg>
</div>
<input type="text" name="text" id="text" class="block w-full text-base rounded shadow-inner-sm py-2 pl-14 pr-14 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="Extra Small" value="jesse.henderson" >
<div class="absolute inset-y-0 right-0 pr-5 flex items-center pointer-events-none">
<svg class="w-7 h-7 text-gray-400" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg>
</div>
</div>
<!-- Extra Large -->
<div class="relative group rounded ">
<div class="absolute inset-y-0 left-0 pl-6 flex items-center pointer-events-none">
<svg class="w-8 h-8 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M15.5,12C18,12 20,14 20,16.5C20,17.38 19.75,18.21 19.31,18.9L22.39,22L21,23.39L17.88,20.32C17.19,20.75 16.37,21 15.5,21C13,21 11,19 11,16.5C11,14 13,12 15.5,12M15.5,14A2.5,2.5 0 0,0 13,16.5A2.5,2.5 0 0,0 15.5,19A2.5,2.5 0 0,0 18,16.5A2.5,2.5 0 0,0 15.5,14M10,4A4,4 0 0,1 14,8C14,8.91 13.69,9.75 13.18,10.43C12.32,10.75 11.55,11.26 10.91,11.9L10,12A4,4 0 0,1 6,8A4,4 0 0,1 10,4M2,20V18C2,15.88 5.31,14.14 9.5,14C9.18,14.78 9,15.62 9,16.5C9,17.79 9.38,19 10,20H2Z" /></svg>
</div>
<input type="text" name="text" id="text" class="block w-full text-lg rounded shadow-inner-sm py-2.5 pl-16 pr-16 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="Extra Small" value="jesse.henderson" >
<div class="absolute inset-y-0 right-0 pr-6 flex items-center pointer-events-none">
<svg class="w-8 h-8 text-gray-400" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg>
</div>
</div># Icon Left
<!-- Extra Small -->
<div class="relative group rounded-xs ">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="w-3 h-3 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /></svg>
</div>
<input type="text" name="text" id="text" class="block w-full text-xs rounded-xs shadow-inner-sm py-0.5 pl-8 pr-3 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="Search..." value="Jesse Henderson" >
</div>
<!-- Small -->
<div class="relative group rounded-xs ">
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
<svg class="w-4.5 h-4.5 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /></svg>
</div>
<input type="text" name="text" id="text" class="block w-full text-sm rounded-xs shadow-inner-sm py-1 pl-10 pr-3.5 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="Search..." value="Jesse Henderson" >
</div>
<!-- Medium -->
<div class="relative group rounded-sm ">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<svg class="w-6 h-6 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /></svg>
</div>
<input type="text" name="text" id="text" class="block w-full text-base rounded-sm shadow-inner-sm py-1 pl-12 pr-4 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="Search..." value="Jesse Henderson" >
</div>
<!-- Large -->
<div class="relative group rounded ">
<div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
<svg class="w-7 h-7 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /></svg>
</div>
<input type="text" name="text" id="text" class="block w-full text-base rounded shadow-inner-sm py-2 pl-14 pr-5 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="Search..." value="Jesse Henderson" >
</div>
<!-- Extra Large -->
<div class="relative group rounded ">
<div class="absolute inset-y-0 left-0 pl-6 flex items-center pointer-events-none">
<svg class="w-8 h-8 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /></svg>
</div>
<input type="text" name="text" id="text" class="block w-full text-lg rounded shadow-inner-sm py-2.5 pl-16 pr-6 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="Search..." value="Jesse Henderson" >
</div># Icon right
<!-- Extra Small -->
<div class="relative group rounded-xs ">
<input type="text" name="text" id="text" class="block w-full text-xs rounded-xs shadow-inner-sm py-0.5 pl-3 pr-8 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="@Username" value="@JesseHenderson" >
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<svg class="w-3 h-3 text-gray-400" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" /></svg>
</div>
</div>
<!-- Small -->
<div class="relative group rounded-xs ">
<input type="text" name="text" id="text" class="block w-full text-sm rounded-xs shadow-inner-sm py-1 pl-3.5 pr-10 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="@Username" value="@JesseHenderson" >
<div class="absolute inset-y-0 right-0 pr-3.5 flex items-center pointer-events-none">
<svg class="w-4.5 h-4.5 text-gray-400" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" /></svg>
</div>
</div>
<!-- Medium -->
<div class="relative group rounded-sm ">
<input type="text" name="text" id="text" class="block w-full text-base rounded-sm shadow-inner-sm py-1 pl-4 pr-12 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="@Username" value="@JesseHenderson" >
<div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
<svg class="w-6 h-6 text-gray-400" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" /></svg>
</div>
</div>
<!-- Large -->
<div class="relative group rounded ">
<input type="text" name="text" id="text" class="block w-full text-base rounded shadow-inner-sm py-2 pl-5 pr-14 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="@Username" value="@JesseHenderson" >
<div class="absolute inset-y-0 right-0 pr-5 flex items-center pointer-events-none">
<svg class="w-7 h-7 text-gray-400" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" /></svg>
</div>
</div>
<!-- Extra Large -->
<div class="relative group rounded ">
<input type="text" name="text" id="text" class="block w-full text-lg rounded shadow-inner-sm py-2.5 pl-6 pr-16 border-gray-200 text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-gray-400 focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-primary focus:border-undefined focus:hover:border-undefined" placeholder="@Username" value="@JesseHenderson" >
<div class="absolute inset-y-0 right-0 pr-6 flex items-center pointer-events-none">
<svg class="w-8 h-8 text-gray-400" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" /></svg>
</div>
</div># Error state
Set the error state by modifying the utility classes.
<!-- Extra Small -->
<div class="relative group rounded-xs ">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="w-3 h-3 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-xs rounded-xs shadow-inner-sm py-0.5 pl-8 pr-3 border-danger text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-danger focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-danger focus:border-danger" placeholder="email@company.com" value="jesse.henderson" aria-invalid="true" aria-describedby="email-error">
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<svg class="w-3 h-3 text-danger" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z" /></svg>
</div>
</div>
<!-- Small -->
<div class="relative group rounded-xs ">
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
<svg class="w-4.5 h-4.5 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-sm rounded-xs shadow-inner-sm py-1 pl-10 pr-3.5 border-danger text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-danger focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-danger focus:border-danger" placeholder="email@company.com" value="jesse.henderson" aria-invalid="true" aria-describedby="email-error">
<div class="absolute inset-y-0 right-0 pr-3.5 flex items-center pointer-events-none">
<svg class="w-4.5 h-4.5 text-danger" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z" /></svg>
</div>
</div>
<!-- Medium -->
<div class="relative group rounded-sm ">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<svg class="w-6 h-6 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-base rounded-sm shadow-inner-sm py-1 pl-12 pr-4 border-danger text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-danger focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-danger focus:border-danger" placeholder="email@company.com" value="jesse.henderson" aria-invalid="true" aria-describedby="email-error">
<div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
<svg class="w-6 h-6 text-danger" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z" /></svg>
</div>
</div>
<!-- Large -->
<div class="relative group rounded ">
<div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
<svg class="w-7 h-7 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-base rounded shadow-inner-sm py-2 pl-14 pr-5 border-danger text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-danger focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-danger focus:border-danger" placeholder="email@company.com" value="jesse.henderson" aria-invalid="true" aria-describedby="email-error">
<div class="absolute inset-y-0 right-0 pr-5 flex items-center pointer-events-none">
<svg class="w-7 h-7 text-danger" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z" /></svg>
</div>
</div>
<!-- Extra Large -->
<div class="relative group rounded ">
<div class="absolute inset-y-0 left-0 pl-6 flex items-center pointer-events-none">
<svg class="w-8 h-8 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-lg rounded shadow-inner-sm py-2.5 pl-16 pr-6 border-danger text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-danger focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-danger focus:border-danger" placeholder="email@company.com" value="jesse.henderson" aria-invalid="true" aria-describedby="email-error">
<div class="absolute inset-y-0 right-0 pr-6 flex items-center pointer-events-none">
<svg class="w-8 h-8 text-danger" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z" /></svg>
</div>
</div># Warning state
Set the warning state by modifying the utility classes.
<!-- Extra Small -->
<div class="relative group rounded-xs ">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="w-3 h-3 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-xs rounded-xs shadow-inner-sm py-0.5 pl-8 pr-3 border-warning text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-warning focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-warning focus:border-warning" placeholder="email@company.com" value="jesse.henderson@gmail.com" >
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<svg class="w-3 h-3 text-warning" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>
</div>
</div>
<!-- Small -->
<div class="relative group rounded-xs ">
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
<svg class="w-4.5 h-4.5 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-sm rounded-xs shadow-inner-sm py-1 pl-10 pr-3.5 border-warning text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-warning focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-warning focus:border-warning" placeholder="email@company.com" value="jesse.henderson@gmail.com" >
<div class="absolute inset-y-0 right-0 pr-3.5 flex items-center pointer-events-none">
<svg class="w-4.5 h-4.5 text-warning" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>
</div>
</div>
<!-- Medium -->
<div class="relative group rounded-sm ">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<svg class="w-6 h-6 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-base rounded-sm shadow-inner-sm py-1 pl-12 pr-4 border-warning text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-warning focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-warning focus:border-warning" placeholder="email@company.com" value="jesse.henderson@gmail.com" >
<div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
<svg class="w-6 h-6 text-warning" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>
</div>
</div>
<!-- Large -->
<div class="relative group rounded ">
<div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
<svg class="w-7 h-7 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-base rounded shadow-inner-sm py-2 pl-14 pr-5 border-warning text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-warning focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-warning focus:border-warning" placeholder="email@company.com" value="jesse.henderson@gmail.com" >
<div class="absolute inset-y-0 right-0 pr-5 flex items-center pointer-events-none">
<svg class="w-7 h-7 text-warning" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>
</div>
</div>
<!-- Extra Large -->
<div class="relative group rounded ">
<div class="absolute inset-y-0 left-0 pl-6 flex items-center pointer-events-none">
<svg class="w-8 h-8 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-lg rounded shadow-inner-sm py-2.5 pl-16 pr-6 border-warning text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-warning focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-warning focus:border-warning" placeholder="email@company.com" value="jesse.henderson@gmail.com" >
<div class="absolute inset-y-0 right-0 pr-6 flex items-center pointer-events-none">
<svg class="w-8 h-8 text-warning" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>
</div>
</div># Success state
Set the success state by modifying the utility classes.
<!-- Extra Small -->
<div class="relative group rounded-xs ">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="w-3 h-3 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-xs rounded-xs shadow-inner-sm py-0.5 pl-8 pr-3 border-success text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-success focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-success focus:border-success" placeholder="email@company.com" value="jesse.henderson@acme.com" >
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<svg class="w-3 h-3 text-success" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" /></svg>
</div>
</div>
<!-- Small -->
<div class="relative group rounded-xs ">
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
<svg class="w-4.5 h-4.5 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-sm rounded-xs shadow-inner-sm py-1 pl-10 pr-3.5 border-success text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-success focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-success focus:border-success" placeholder="email@company.com" value="jesse.henderson@acme.com" >
<div class="absolute inset-y-0 right-0 pr-3.5 flex items-center pointer-events-none">
<svg class="w-4.5 h-4.5 text-success" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" /></svg>
</div>
</div>
<!-- Medium -->
<div class="relative group rounded-sm ">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<svg class="w-6 h-6 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-base rounded-sm shadow-inner-sm py-1 pl-12 pr-4 border-success text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-success focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-success focus:border-success" placeholder="email@company.com" value="jesse.henderson@acme.com" >
<div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
<svg class="w-6 h-6 text-success" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" /></svg>
</div>
</div>
<!-- Large -->
<div class="relative group rounded ">
<div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
<svg class="w-7 h-7 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-base rounded shadow-inner-sm py-2 pl-14 pr-5 border-success text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-success focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-success focus:border-success" placeholder="email@company.com" value="jesse.henderson@acme.com" >
<div class="absolute inset-y-0 right-0 pr-5 flex items-center pointer-events-none">
<svg class="w-7 h-7 text-success" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" /></svg>
</div>
</div>
<!-- Extra Large -->
<div class="relative group rounded ">
<div class="absolute inset-y-0 left-0 pl-6 flex items-center pointer-events-none">
<svg class="w-8 h-8 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-lg rounded shadow-inner-sm py-2.5 pl-16 pr-6 border-success text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-success focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-success focus:border-success" placeholder="email@company.com" value="jesse.henderson@acme.com" >
<div class="absolute inset-y-0 right-0 pr-6 flex items-center pointer-events-none">
<svg class="w-8 h-8 text-success" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" /></svg>
</div>
</div># Info state
Set the info state by modifying the utility classes.
<!-- Extra Small -->
<div class="relative group rounded-xs ">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="w-3 h-3 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-xs rounded-xs shadow-inner-sm py-0.5 pl-8 pr-8 border-info text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-info focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-info focus:border-info" placeholder="email@company.com" value="" >
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<svg class="w-3 h-3 text-info" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>
<svg class="w-3 h-3 text-gray-400" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg>
</div>
</div>
<!-- Small -->
<div class="relative group rounded-xs ">
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
<svg class="w-4.5 h-4.5 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-sm rounded-xs shadow-inner-sm py-1 pl-10 pr-10 border-info text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-info focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-info focus:border-info" placeholder="email@company.com" value="" >
<div class="absolute inset-y-0 right-0 pr-3.5 flex items-center pointer-events-none">
<svg class="w-4.5 h-4.5 text-info" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>
<svg class="w-4.5 h-4.5 text-gray-400" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg>
</div>
</div>
<!-- Medium -->
<div class="relative group rounded-sm ">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<svg class="w-6 h-6 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-base rounded-sm shadow-inner-sm py-1 pl-12 pr-12 border-info text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-info focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-info focus:border-info" placeholder="email@company.com" value="" >
<div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
<svg class="w-6 h-6 text-info" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>
<svg class="w-6 h-6 text-gray-400" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg>
</div>
</div>
<!-- Large -->
<div class="relative group rounded ">
<div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
<svg class="w-7 h-7 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-base rounded shadow-inner-sm py-2 pl-14 pr-14 border-info text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-info focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-info focus:border-info" placeholder="email@company.com" value="" >
<div class="absolute inset-y-0 right-0 pr-5 flex items-center pointer-events-none">
<svg class="w-7 h-7 text-info" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>
<svg class="w-7 h-7 text-gray-400" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg>
</div>
</div>
<!-- Extra Large -->
<div class="relative group rounded ">
<div class="absolute inset-y-0 left-0 pl-6 flex items-center pointer-events-none">
<svg class="w-8 h-8 text-gray-400" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z" /></svg>
</div>
<input type="email" name="email" id="email" class="block w-full text-lg rounded shadow-inner-sm py-2.5 pl-16 pr-16 border-info text-dark placeholder-gray-400 transition duration-300 ease-in-out hover:shadow-sm hover:border-danger-info focus:outline-none focus:ring focus:ring-offset-0 focus:ring-opacity-25 focus:ring-info focus:border-info" placeholder="email@company.com" value="" >
<div class="absolute inset-y-0 right-0 pr-6 flex items-center pointer-events-none">
<svg class="w-8 h-8 text-info" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>
<svg class="w-8 h-8 text-gray-400" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg>
</div>
</div>On this Page
v1.13.5