---
title: "Input Scanner"
description: <p>'Input Scanner' enhances input elements with a cursor indicator that changes color based on the current state of the input's validation. Upon completion of the user's input, the cursor then 'scans' over the input element to indicate completion. If a user wishes to re-edit an input element, the form will unscan the input on click. On form submission, invalid/incomplete elements are indicated by a blinking red cursor. If the form is valid, a cursor then scans over the submit button with a completion message.</p>
author: Brian Merriman
category: evolution
type: forms
order: 1
---

<form action="" class="evo_c-input-scanner" onsubmit="return false">
  <div class="evo_c-input-scanner__inputContainer"><input type="text" class="evo_c-input-scanner__input" required tabindex="1" placeholder="First Name" /></div>
  <div class="evo_c-input-scanner__inputContainer"><input type="text" class="evo_c-input-scanner__input" required tabindex="2" placeholder="Last Name" /></div>
  <div class="evo_c-input-scanner__inputContainer"><input type="email" class="evo_c-input-scanner__input" required tabindex="3" placeholder="Email" /></div>
  <div class="evo_c-input-scanner__submitContainer"><input type="submit" class="evo_c-input-scanner__submit" tabindex="4" value="I would like to help" /></div> 
</form>

Add input scanner to showcase
Add input scanner to showcase
