Input Fields can be validated withouth needing a new page load. They give instant user feedback to make filling out forms easier.


Input Is Required

Input Is Valid

Input Is Invalid

Oops, mistyped the address?


  • SASS:
    @import "base";
    @import "imports/modules/forms";


<div class="l-input-validation-example">
	<h4>Input Is Required</h4>
	<div class="form-component is-required">
		<label class="input-required" for="lastname">Last Name</label>
		<input class="space-lover" type="text" id="lastname" placeholder="Lindström-Blaumeier" required>

<div class="l-input-validation-example">
	<h4>Input Is Valid</h4>
	<div class="form-component is-required is-ok">
		<label class="input-required" for="mailadress">E-mail Address</label>
		<input class="space-lover" type="text" id="mailadress" value="" required>
		<i class="fa fa--check"></i>

<div class="l-input-validation-example">
	<h4>Input Is Invalid</h4>
	<div class="form-component is-required is-error">
		<label class="input-required" for="mailadress--error">E-mail Address</label>
		<input type="text" id="mailadress--error" value="hello@email.comm" required>
		<i class="fa fa-warning"></i>
		<p class="form-message">Oops, mistyped the address?</p>