INPUTS
Input elements are used to get the response from the user. This can be in the form of a variety pf elements - input boxes, radio buttons, checkboxes, text area, etc.
COMPONENT-DEMO
Basic Input Forms
<!-- FORM CONTAINING INPUTS -->
<form class="gentle-form-group">
<div class="gentle-input-group">
<label class="gentle-input-label">Name</label>
<input
type="text"
class="gentle-input"
placeholder="Type Here..."
/>
</div>
<div class="gentle-input-group">
<label class="gentle-input-label">Email</label>
<input
type="email"
class="gentle-input"
placeholder="Enter your email..."
/>
</div>
</form>
Other Input Variants
<!-- FORM CONTAINING INPUTS -->
<form class="gentle-form-group">
<!-- PRIMARY INPUT COMPONENT -->
<div class="gentle-input-group">
<label class="gentle-input-label">Name</label>
<input
type="text"
class="gentle-input gentle-primary-input"
placeholder="Primary variant..."
/>
</div>
<!-- SECONDARY INPUT COMPONENT -->
<div class="gentle-input-group">
<label class="gentle-input-label">Email</label>
<input
type="email"
class="gentle-input gentle-secondary-input"
placeholder="Secondary Variant..."
/>
</div>
</form>
SEARCH BAR:
<!-- SEARCH BAR COMPONENT -->
<div class="gentle-search-group">
<i class="fas fa-search search-icon"></i>
<input
type="search"
class="gentle-search-bar"
placeholder="Search-for-products"
/>
</div>
OUTLINED INPUTS IN DIFFERENT COLOR VARIANTS:
<!-- OUTLINED INPUT COMPONENT -->
<div class="gentle-outlined-input-container">
<label class="gentle-outlined-input-label"> NAME </label>
<input
type="text"
class="gentle-outlined-input"
placeholder="OUTLINED INPUT"
/>
</div>
<!-- OUTLINED WARNING INPUT COMPONENT -->
<div
class="gentle-outlined-input-container gentle-outlined-input-warning"
>
<label class="gentle-outlined-input-label"> NAME </label>
<input
type="text"
class="gentle-outlined-input"
placeholder="WARNING VARIANT"
/>
</div>
<!-- OUTLINED SUCCESS INPUT COMPONENT -->
<div
class="gentle-outlined-input-container gentle-outlined-input-success"
>
<label class="gentle-outlined-input-label"> NAME </label>
<input
type="text"
class="gentle-outlined-input"
placeholder="success-variant"
/>
</div>
ENCLOSED INPUTS WITH VALIDATION
<!-- FORM CONTAINING INPUTS -->
<form class="gentle-form-group">
<!-- ENCLOSED WARNING INPUTS WITH VALIDATION -->
<div class="gentle-input-group">
<label class="gentle-input-label">Name</label>
<input
type="text"
class="gentle-input gentle-warning-input"
placeholder="Primary variant..."
/>
</div>
<div class="validation-msg">Enter a proper name</div>
<div class="gentle-input-group">
<label class="gentle-input-label">Email</label>
<input
type="email"
class="gentle-input gentle-warning-input"
placeholder="Secondary Variant..."
/>
</div>
<div class="validation-msg">WEAK EMAIL</div>
</form>
</div>
OUTLINED INPUT WITH VALIDATION VARIANTS
Valid Name
Valid email
class="gentle-outlined-input-container gentle-outlined-input-success"
>
<label class="gentle-outlined-input-label">NAME</label>
<input
type="text"
class="gentle-outlined-input"
placeholder="Enter your mail"
/>
<p class="validation-msg">Valid Name</p>
</div>
<!-- OUTLINED SUCCESS INPUT COMPONENT WITH VALIDATION -->
<div
class="gentle-outlined-input-container gentle-outlined-input-success"
>
<label class="gentle-outlined-input-label"> EMAIL </label>
<input
type="email"
class="gentle-outlined-input"
placeholder="Enter your email"
/>
<p class="validation-msg">Valid email</p>
</div>
</div>
TEXT AREA INPUT SECTION
<div
class="gentle-outlined-input-container gentle-textarea-container"
>
<label for="life" class="gentle-outlined-input-label">
Write about your Life
</label>
<textarea
class="gentle-outlined-input"
name="life-description"
id="life"
cols="40"
rows="3"
placeholder="write your life journey"
>
</textarea>
</div>
</div>