Components

Input

The Input component is a way by which user interacts with the webiste. We can take input from user either in writing or let user select from a list of options. Below are the various input components:

1. Basic input

2. Input with validation: used to tell user whether a input follows a set of rules or not.

3. Radio button: Radio buttons are normally presented in groups. Only one radio button in a group can be selected at the same time.

4. Checkbox: Checkbox is used to take multiple inputs for a same field.

5. Dropdown

1. Basic input:

            
                <div class="input-container">
                    <div class="input-name">
                        <label for="name">Name:</label>
                        <input type="text" id="name" class="name-input-field">
                    </div>
                    <div class="input-password">
                        <label for="password">Password:</label>
                        <input type="text" id="password" class="password-input-field">
                    </div>
                </div>

2. Input With Validation:

This username is valid
The username and password don't match 
            
                <div class="input-container">
                    <div class="input-name">
                        <label for="name">Name:</label>
                        <input type="text" id="name" class="name-input-field input-field-right">
                        <small class="right-input-validation">This username is valid</small>
                    </div>
                    <div class="input-password">
                        <label for="password">Password:</label>
                        <input type="text" id="password" class="password-input-field input-field-wrong">
                        <small class="wrong-input-validation">The username and password don't match</small>
                    </div>
                </div>

3. Radio Button:

Please select your gender:

            
            <div class="input-container">
                <div>
                    <p>Please select your gender:</p>
                    <input type="radio" name="gender" value="male" id="male">
                    <label for="male">Male</label>
                    <input type="radio" name="gender" value="female" id="female">
                    <label for="female">Female</label>
                    <input type="radio" name="gender" value="others" id="others">
                    <label for="others">Others</label>
                </div>
            </div>

4. Check Box:

Please select the type:

            
            <div class="input-container">
                <div>
                    <p>Please select the type:</p>
                    <input type="checkbox" name="shoes" id="sports" value="sports">
                    <label for="sports">Sports Shoes</label>
                    <input type="checkbox" name="shoes" id="boots" value="boots">
                    <label for="boots">Boots</label>
                    <input type="checkbox" name="shoes" id="formal" value="formal">
                    <label for="formal">Formal Shoes</label>
                    <input type="checkbox" name="shoes" id="sneakers" value="sneakers">
                    <label for="sneakers">Sneakers</label>
                </div>
            </div>

5. Dropdown:

            
                <div class="input-container">
                    <label for="payment">Select your mode of payment:</label>
                    <select name="payment" id="payment" class="input-dropdown">
                        <option value="upi">UPI</option>
                        <option value="net">Net Banking</option>
                        <option value="credit">Credit Card</option>
                        <option value="debit">Debit Card</option>
                        <option value="wallet">Wallet</option>
                        <option value="paypal">Paypal</option>
                    </select>
                </div>
designed by Rajat Gupta