Google Material Input

HTML

<h1>Normal</h1>

<div class="paper-input__wrapper">
	<input class="paper-input" type="text" />
	<label>Label</label>
</div>

<div class="paper-input__wrapper">
	<textarea class="paper-input" rows= "3"></textarea>
	<label>Text</label>
</div>

<h1>Floating</h1>

<div class="paper-input__wrapper">
	<input class="paper-input paper-input--floating" type="text" />
	<label>Floating Label</label>
</div>

<div class="paper-input__wrapper">
	<textarea class="paper-input paper-input--floating" rows= "3"></textarea>
	<label>Text</label>
</div>

<h1>Disabled</h1>

<div class="paper-input__wrapper">
	<input class="paper-input" type="text" disabled />
	<label>Disabled</label>
</div>

<div class="paper-input__wrapper">
	<textarea class="paper-input" rows= "3" disabled></textarea>
	<label>Disabled Text</label>
</div>

<h1>Errors</h1>

<div class="paper-input__wrapper">
	<input class="paper-input paper-input--floating" type="text" pattern="[0-9]*" />
	<label>Floating Label</label>
	<span class="paper-input__error">Input should only contain numbers!</span>
</div>

<div class="paper-input__wrapper">
	<textarea class="paper-input paper-input--floating" rows= "3" required></textarea>
    <label>Text</label>
    <span class="paper-input__error">Input is required!</span>
</div>

SCSS

textarea {
	resize: none;
	overflow: auto;
}

.paper-input__wrapper {
	position: relative;
	width: 100%;
	margin-bottom: 2rem;
}

.paper-input {
	display: block;
	width: 100%;
	margin: 0;
	border: none;
	border-bottom: 1px solid #666;
	font-size: 1rem;
	padding: 0.5rem 0;

	&[disabled] {
		border-bottom: 1px dashed rgba(0,0,0, 0.12);
		background-color: transparent;
	}
}

.paper-input:focus,
.paper-input.has-focus { 
	outline: none;

	& ~ label::after {
		visibility: visible;
		width: 100%;
		left: 0;
	}
}

.paper-input ~ label {
	font-size: 1rem;
	width: 100%;
	position: absolute;
	pointer-events: none;
	left: 0;
	top: 0.625rem;
	bottom: 0;
	color: #666;
	
	&::after {
		content: '';
		background-color: #3f51b5;
		height: 2px;
		width: 0.625rem;
		bottom: 0;
		left: 45%;
		visibility: hidden;
		position: absolute;
		transition: 0.2s ease all; 
	} 
}

.paper-input--touched ~ label {
	visibility: hidden;
}

// Floating
.paper-input--floating ~ label {
	transition: 0.2s ease all;
}

/*
.paper-input--floating:focus ~ label,
.paper-input--floating.paper-input--touched ~ label {
	visibility: visible;
	top: -0.625rem;
	font-size: 0.75rem;
	color: #3f51b5;
}*/

// Errors
.paper-input__error {
	float: left;
	margin-top: 3px;
	color: #d34336;
	font-size: 0.75rem;
	visibility: hidden;
}

.paper-input--floating.paper-input--dirty:invalid ~ label {
	top: -0.625rem;
	font-size: 0.75rem;
	color: #d34336;
}

.paper-input--dirty:invalid ~ label:after {
	background-color: #d34336;
}

.paper-input--dirty:invalid ~ .paper-input__error {
	visibility: visible;
}

.paper-input--dirty:invalid {
	box-shadow: none;
	border-color: #d34336; 
}

JavaScript

var element = $('.paper-input');

element.on('keydown keyup focus blur', function() {
    if($(this).val() != '') {
        $(this).addClass('paper-input--touched');
    } else{
        $(this).removeClass('paper-input--touched');
    }
});

element.on('keyup blur', function() {
   $(this).addClass('paper-input--dirty'); 
});