Forms

Form elements, controls and validation.

Animated Form Field Labels

The label of the form fields animates out of the container to above the container when clicked or tabbed into.

Tab or click into the input field to view the animation.

    
      <form class="lmp-form">
    <div class="animated-input">
      <div class="form-group">
        <input type="text" class="form-control" id="exampleInput">
        <label for="exampleInput">Animated Label</label>
      </div>  
    </div>
  </form>

Text Inputs

    
      <div class="lmp-form">
    <div class="mb-3">
      <div class="animated-input">
        <div class="form-group">
          <input type="text" class="form-control" id="input1" required>
          <label for="input1">Text Input</label>
          <div class="valid-feedback">This field is valid</div>
          <div class="invalid-feedback">This field is invalid</div>
        </div>  
      </div>
    </div>
    <div class="animated-input">
      <div class="form-group">
        <textarea class="form-control" id="textareaExample" rows="3" required></textarea>
        <label for="textareaExample">Text Area</label>
        
        <div class="valid-feedback">This field is valid</div>
        <div class="invalid-feedback">This field is invalid</div>
      </div>  
    </div>
  </div>

Standard Select Dropdown

    
      
  <div class="lmp-form">
    <div class="animated-input">
      <div class="form-group">
        <select class="form-control custom-select" id="formSelect-selectExample2" required>
          <option></option>
          <option value="Select item1">Select Item 1</option>
          <option value="Select item2">Select Item 2</option>
          <option value="Select item3">Select Item 3</option>
        </select>
        <label for="formSelect-selectExample2">Please Select One</label>
        
        <div class="valid-feedback">Valid selection</div>
        <div class="invalid-feedback">Please Select One</div>
      </div>
    </div>
  </div>

Search

    
      
  <div class="lmp-form">
    <div class="animated-input">
      <div class="input-group">
        <input type="search" class="form-control" id="formInput-search" aria-label="Search" aria-describedby="inputHelp-search" required>
        <label for="formInput-search">Search</label>
        <div class="input-group-append" tabindex="0">
          <span class="input-group-text" id="search-icon"><i class="lmp-icon">search</i></span>
        </div>
      </div>
    </div>
  </div>

Radio Buttons and Checkboxes

    
      <div class="lmp-form">
    <div class="form-check">
        <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="checkExample1" required>
          <label class="custom-control-label" for="checkExample1">Checkbox 1</label>
        </div>
        <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="checkExample2" required>
          <label class="custom-control-label" for="checkExample2">Checkbox 2</label>
        </div>
    </div>
    <br>
    <div class="form-check">
        <div class="custom-control custom-radio">
          <input type="radio" class="custom-control-input" id="radioExample-0" name="radioExample" required>
          <label class="custom-control-label" for="radioExample-0">Radio 1</label>
        </div>
        <div class="custom-control custom-radio">
          <input type="radio" class="custom-control-input" id="radioExample-1" name="radioExample" required>
          <label class="custom-control-label" for="radioExample-1">Radio 2</label>
        </div>
    </div>
  </div>

Custom Checkboxes List

    
      <!--  Weekday check box list  -->
  <div class="lmp-form">
    <div class="weekday-options">
      
      <div class="btn-group-toggle" data-toggle="buttons">
        <label class="btn  active">
          <input type="checkbox" checked> S
        </label>
      </div>
      <div class="btn-group-toggle" data-toggle="buttons">
        <label class="btn ">
          <input type="checkbox" checked> M
        </label>
      </div>
      <div class="btn-group-toggle" data-toggle="buttons">
        <label class="btn ">
          <input type="checkbox" checked> T
        </label>
      </div>
      <div class="btn-group-toggle" data-toggle="buttons">
        <label class="btn ">
          <input type="checkbox" checked> W
        </label>
      </div>
      <div class="btn-group-toggle" data-toggle="buttons">
        <label class="btn ">
          <input type="checkbox" checked> Th
        </label>
      </div>
      <div class="btn-group-toggle" data-toggle="buttons">
        <label class="btn ">
          <input type="checkbox" checked> F
        </label>
      </div>
      <div class="btn-group-toggle" data-toggle="buttons">
        <label class="btn ">
          <input type="checkbox" checked> S
        </label>
      </div>
    </div>
  </div>

Date Picker

View in new window
    
      
  <div class="lmp-form">
    <div class="animated-input">
      <div class="form-group">
        <input type="text" id="exampleDatePicker" class="form-control lmp-pickadate">
        <label for="exampleDatePicker" class="d-flex align-items-center lmp-pickadate-icon"><i class="lmp-icon">date_range</i> Select Date</label>
      </div>
    </div>
  </div>