Input

Input is another way the user interacts with websites. They are used to get user's inputs and choices.

Input Fields

Input fields usually have a label along with the actual input field. 


<div class="input-form-wrapper">
  <div class="input-group">
    <label for="name" class="input-label-block">name</label>
    <input type="text" id="name" class="input-item input-item-block">
  </div>
  <div class="input-group">
    <label for="password" class="input-label-block">Password</label>
    <input type="password" id="password" class="input-item input-item-block">
  </div>
</div>

Input Fields with Validation styles

By adding class .input-success and .input-error on div / form with .input-group class user can style validation messages.

This username is valid
The username and password don't match 

<div class="input-form-wrapper">
  <div class="input-group input-success">
    <label class="input-label-block">name</label>
    <input class="input-item input-item-block">
    <div class="input-validation">
      <i class="far fa-check-circle"></i>
      <small>This username is valid</small>
    </div>
  </div>
  <div class="input-group input-error">
    <label class="input-label-block">Password</label>
    <input class="input-item input-item-block">
    <div class="input-validation">
      <i class="far fa-times-circle"></i>
      <small>The username and password don't match</small>
    </div>
  </div>
</div>

Radio Buttons

Radio butons are used to select from a set of given values for a particular field

Select your preffered channel to receive OTP:


<div class="input-form-wrapper-hz">
  <div class="input-group-hz">
    <input type="radio" name="contact" id="email">
    <label for="email">Email</label>
  </div>
  <div class="input-group-hz">
    <input type="radio" name="contact" id="text">
    <label for="text">Text</label>
  </div>
  <div class="input-group-hz">
    <input type="radio" name="contact" id="call">
    <label for="call">Call</label>
  </div>
</div>

Checkbox

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

Show laptops from below brands:


<div class="input-form-wrapper-hz">
  <div class="input-group-hz">
    <input type="checkbox" name="brand" id="Lenovo">
    <label for="Lenovo">Lenovo</label>
  </div>
  <div class="input-group-hz">
    <input type="checkbox" name="brand" id="HP">
    <label for="HP">HP</label>
  </div>
  <div class="input-group-hz">
    <input type="checkbox" name="brand" id="Asus">
    <label for="Asus">Asus</label>
  </div>
</div>

Dropdown

Dropdown's are used to display List of Values. The user can select one of the values for a particular property 

<div class="dropdowm-wrapper">
  <label for="currency" class="input-label">Select your currency:</label>
  <select name="currency" id="currency" class="dropdown">
    <option value="INR" class="dropdown-option">INR</option>
    <option value="USD" class="dropdown-option">USD</option>
    <option value="AUD" class="dropdown-option">AUD</option>
    <option value="EUR" class="dropdown-option">EUR</option>
  </select>
</div>
 Image
Lists