Inputs

Inputs are necessary for user interaction with the website. Inputs are used to take information from the user, and then save the data.

Labeled Inputs

Use various labeled inputs in your project. Have a look at the demo & the code reference below.

        
  <form class="form">
    <div class="input-group input-text">
      <label for="username">Username</label>
      <input
        class="input"
        type="text"
        name="username"
        id="username"
        placeholder="Horsemaker"
      />
    </div>
    <div class="input-group input-email">
      <label for="email">Email*</label>
      <input
        class="input"
        type="email"
        name="email"
        id="email"
        placeholder="hey@example.com"
        required
      />
    </div>
    <div class="input-group input-text">
      <label for="country">Country</label>
      <input
        class="input"
        type="text"
        name="country"
        id="country"
        placeholder="India, USA, etc."
        value="India"
        disabled
      />
    </div>
    <div class="input-group input-text">
      <label for="city">City</label>
      <input
        class="input"
        type="text"
        name="city"
        id="city"
        placeholder="Mumbai, Delhi, etc."
        value="Mumbai"
        readonly
      />
    </div>
  </form>
        
      

Errored / Successful Inputs

Use errored & successful indicators for inputs in your project with error & success classes. Have a look at the demo & the code reference below.

        
  <form class="form">
    <div class="input-group input-password error">
      <label for="password">Password*</label>
      <input
        class="input"
        type="password"
        name="password"
        id="password"
        required
      />
      <div class="validity-message">Minimum 8 characters required!</div>
    </div>
    <div class="input-group input-password success">
      <label for="confirmPassword">Confirm Password*</label>
      <input
        class="input"
        type="password"
        name="confirmPassword"
        id="confirmPassword"
        required
      />
      <div class="validity-message">Password Matched!</div>
    </div>
  </form>
        
      

Inputs with Options

To use input field that provides options to select from have a look at the demo & the code reference below.

        
  <form class="form">
    <div class="input-group input-options">
      <label for="color">Choose a color 👇</label>
      <input
        class="input"
        type="text"
        name="color"
        id="color"
        list="colors"
      />
      <datalist id="colors">
        <option value="Orange"></option>
        <option value="Purple"></option>
        <option value="Green"></option>
      </datalist>
    </div>
  </form>
        
      

Inputs for Date & Time

To use input field that helps you select a particular date & time have a look at the demo & the code reference below.

        
  <form class="form">
    <div class="input-group input-date">
      <label for="date">Date</label>
      <input class="input" type="date" name="date" id="date" />
    </div>
    <div class="input-group input-time">
      <label for="time">Time</label>
      <input class="input" type="time" name="time" id="time" />
    </div>
  </form>
        
      

Input for Numbers only

To use input field that helps you input a particular number have a look at the demo & the code reference below.

        
  <form class="form">
    <div class="input-group input-number">
      <label for="number">Number</label>
      <input
        class="input"
        type="number"
        name="number"
        id="number"
        placeholder="0"
      />
    </div>
  </form>
        
      

Input to choose a file

To use input field that helps you choose a particular file have a look at the demo & the code reference below.

        
  <form class="form">
    <div class="input-group input-file">
      <label for="file">Upload file</label>
      <input class="input" type="file" name="file" id="file" />
    </div>
  </form>
        
      

Textarea

To use textarea that helps you input long text have a look at the demo & the code reference below.

        
  <form class="form">
    <div class="input-group input-textarea">
      <label for="review">Review</label>
      <textarea
        class="textarea"
        name="review"
        id="review"
        cols="30"
        rows="5"
      ></textarea>
    </div>
  </form>
        
      

Checkbox Inputs

To use input fields that helps you select multiple options through checkboxes have a look at the demo & the code reference below.

        
  <form class="form">
    <div class="input-group input-checkbox">
      <input type="checkbox" name="checkbox" id="apple" checked />
      <label for="apple">Apple</label>
    </div>
    <div class="input-group input-checkbox">
      <input type="checkbox" name="checkbox" id="orange" />
      <label for="orange">Orange</label>
    </div>
    <div class="input-group input-checkbox">
      <input type="checkbox" name="checkbox" id="pear" disabled />
      <label for="pear">Pear</label>
    </div>
  </form>
        
      

Radio Inputs

To use input fields that helps you select a particular option through radio inputs have a look at the demo & the code reference below.

        
  <form class="form">
    <div class="input-group input-radio">
      <input type="radio" name="radio" id="mumbai" checked />
      <label for="mumbai">Mumbai</label>
    </div>
    <div class="input-group input-radio">
      <input type="radio" name="radio" id="bangalore" />
      <label for="bangalore">Bangalore</label>
    </div>

    <div class="input-group input-radio">
      <input type="radio" name="radio" id="delhi" disabled />
      <label for="delhi">Delhi</label>
    </div>
  </form>
        
      

Sample Form

A ready-made sample form that might help you in creating your forms.

        
  <form class="form">
    <h2>Registration</h2>
    <div class="input-group input-text">
      <label for="for-username">Username*</label>
      <input
        class="input"
        type="text"
        name="form-username"
        id="form-username"
        placeholder="Horsemaker"
        required
      />
    </div>
    <div class="input-group input-email">
      <label for="form-email">Email*</label>
      <input
        class="input"
        type="email"
        name="form-email"
        id="form-email"
        placeholder="hey@example.com"
        required
      />
    </div>
    <div class="input-group input-password">
      <label for="form-password">Password*</label>
      <input
        class="input"
        type="password"
        name="form-password"
        id="form-password"
        required
      />
    </div>
    <div class="input-group input-password">
      <label for="form-confirmPassword">Confirm Password*</label>
      <input
        class="input"
        type="password"
        name="form-confirmPassword"
        id="form-confirmPassword"
        required
      />
    </div>
    <div class="input-submit">
      <button type="submit" class="btn btn-solid-primary">Sign Up</button>
    </div>
  </form>