Input
Inputs are used to take information from the user and perform necessary actions.
Simple Input
Refer the below code to create a simple input. Make changes as per your requirements.
<div class="input-container mx-auto my-1 g-0">
<label class="input-label" for="text-input">Username</label>
<input
id="text-input"
class="text-input"
type="text"
placeholder="Enter your username here"
/>
</div>
Input with Validation
Refer the below code to create input with success and error validation. Make changes as per your requirements.
<div class="input-container mx-auto my-1 g-0">
<label class="input-label" for="success-input"
>Success Validation</label
>
<input
id="success-input"
class="success-input"
type="email"
placeholder="Enter your email here"
value="example.email@earth.com"
/>
<div class="success-message">
<i class="fas fa-check-circle"></i> Looks Good !
</div>
</div>
<div class="input-container mx-auto my-1 g-0">
<label class="input-label" for="error-input"
>Error Validation</label
>
<input
id="error-input"
class="error-input"
type="password"
placeholder="Enter your password here"
value="passowrd@123"
/>
<div class="error-message">
<i class="fas fa-exclamation-triangle"></i> Wrong Password !
</div>
</div>