Input

Inputs are used to get user input in a text-field. They are mainly used in forms. Inputs can be displayed in various ways depending on its type attribute.

Input Element

Input element comes with a label present at the top of the input field. You can customize the styling to show validations using the .err class on the parent wrapper.

Username

Email* Please enter a valid email id.

Copy
                <div class="input-grp">
                    <label>Username</label>
                    <input type="text" class="input-field" />
                </div>
                <div class="input-grp err">
                    <label>Email*</label>
                    <input type="email" class="input-field" placeholder="johnDoe" />
                    <small>Please enter a valid email id.</small>
                </div>

Textarea Element

The textarea element defines a multi-line text input control. It is often used in a form, to collect user inputs like comments or reviews.

Textarea

Copy
                <div class="input-grp">
                    <label>Textarea</label>
                    <textarea placeholder="enter you text here" rows="4" class="input-field" ></textarea>
                </div>