This post shows how to implement [Material Design](https://material.io) like form [text fields](https://material.io/design/components/text-fields.html) with a floating label and an expanding underline bar animation. The post includes examples of how to style text fields with and without Javascript.

> Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.

*Read more at [Material.io](https://material.io)*.

There are many Material Component libraries and frameworks you can use instead if you need a complete set of ready-made components.

- [Material Components](https://material.io/develop/) - Material Components for Android, Flutter, iOS, and the web
- [Vuetify](https://vuetifyjs.com/en/) - Material Components Framework for Vue.js
- [Vue Material](https://vuematerial.io) - Material Design for Vue.js
- [Angular Material](https://material.angular.io) - Material Design components for Angular
- [MATERIAL-UI](https://material-ui.com) - React components that implement Google's Material Design
- [Materialize](https://materializecss.com) - A modern responsive front-end framework based on Material Design

Continue reading if you want to implement Material Design by yourself.

## Material Design with Javascript

The following demo is a barebone example how to implement Material Design field styles. The demo doesn't contain error handling, validation etc. Javascript is used to change the state of the form field when the field is focused or it's filled with value.

<a href="https://codepen.io/teroauralinna/pen/rZZGpe" class="embedly-card" data-card-width="100%" data-card-controls="0">Embedded content: https://codepen.io/teroauralinna/pen/rZZGpe</a>

### HTML

Let's get started by adding input and textarea field markup.

#### Input field
```html
<div class="form-field">
  <div class="form-field__control">
    <label for="exampleField" class="form-field__label">Example field</label>
    <input id="exampleField" type="text" class="form-field__input" />
  </div>
</div>
```

#### Textarea field
```html
<div class="form-field">
  <div class="form-field__control">
    <label for="exampleTextarea" class="form-field__label">Example textarea</label>
    <textarea id="exampleTextarea" class="form-field__textarea"></textarea>
  </div>
</div>
```

### Styles

In the demo, I have used [Bootstrap Reboot](https://getbootstrap.com/docs/4.1/content/reboot/). Styles might require tweaking if something else is used as a style baseline.

Animations use `translate` and `scale` transform rules which are very simple to use, well supported and have good performance.

```scss
$primary-color: #b11adc;
$animation-duration: 0.4s;

@mixin label-active() {
  font-size: 0.75rem;
  transform: translateY(-14px);
}

.form-field {
  display: block;
  margin-bottom: 16px;
  
  &--is-active {
    .form-field__control {
      &::after {
        border-bottom: 2px solid $primary-color;
        transform: scaleX(150);
      }
    }
    .form-field__label {
      color: #b11adc;
      @include label-active();
    }
  }
  &--is-filled {
    .form-field__label {
      @include label-active();
    }
  }
}
.form-field__label {
  display: block;
  font-size: 1.2rem;
  font-weight: normal;
  left: 0;
  margin: 0;
  padding: 18px 12px 0 ;
  position: absolute;
  top: 0;
  transition: all $animation-duration;
  width: 100%;
}
.form-field__control {
  background: #eee;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  
  &::after {
    border-bottom: 2px solid $primary-color;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    transform: scaleX(0);
    transition: all $animation-duration;
    width: 1%;
  }
}
.form-field__input,
.form-field__textarea {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #999;
  color: #333;
  display: block;
  font-size: 1.2rem;
  margin-top: 24px;
  outline: 0;
  padding: 0 12px 10px 12px;
  width: 100%;
}
.form-field__textarea {
  height: 150px;
}
```

### Trigger for the floating label and the underline bar animation

Now our form fields HTML markup and styles are ready. We still need to add a tiny bit of Javascript that changes the field state when the field is active or inactive.

Following ES6 example could be migrated to use any JS framework or library you might be using in your own project.

```js
const setActive = (el, active) => {
  const formField = el.parentNode.parentNode
  if (active) {
    formField.classList.add('form-field--is-active')
  } else {
    formField.classList.remove('form-field--is-active')
    el.value === '' ? 
      formField.classList.remove('form-field--is-filled') : 
      formField.classList.add('form-field--is-filled')
  }
}

[].forEach.call(
  document.querySelectorAll('.form-field__input, .form-field__textarea'),
  (el) => {
    el.onblur = () => {
      setActive(el, false)
    }
    el.onfocus = () => {
      setActive(el, true)
    }
  }
)
```

## Experimenting Material Design with CSS only approach

We can build almost exactly the same functionality without Javascript using CSS only. Microsoft Edge browser is the only one I didn't get to work properly.

<a href="https://codepen.io/teroauralinna/pen/JeKrXe" class="embedly-card" data-card-width="100%" data-card-controls="0">Embedded content: https://codepen.io/teroauralinna/pen/JeKrXe</a>

### HTML

We need to do a few modifications to the HTML code. Placeholder attribute must be added to the fields. Note that the placeholder must contain at least one space. It doesn't work if it's empty.

We also need to swap the order of input and label elements. New `form-field__bar` div element is also needed. Then we can target elements via siblings selector.

#### Input field
```html
<div class="form-field">
  <div class="form-field__control">
    <input id="exampleField" type="text" class="form-field__input" value="" placeholder=" " />
    <label for="exampleField" class="form-field__label">Example field</label>
    <div class="form-field__bar"></div>
  </div>
</div>
```

#### Textarea field
```html
<div class="form-field">
  <div class="form-field__control">
    <textarea id="exampleTextarea" class="form-field__textarea" placeholder=" "></textarea>
    <label for="exampleTextarea" class="form-field__label">Example textarea</label>
    <div class="form-field__bar"></div>
  </div>
</div>
```

### Styles

Styles need few major changes without Javascript. When we use Javascript we can add a state modifier class to any element we want. But we have quite limited options when using CSS only. We can use siblings selector to style elements which are placed after the input element.

The focused field can use `:focus` selector. Selector [`:placeholder-shown`](https://www.caniuse.com/#search=placeholder-shown) seems to be the only way to target styles to the field that has value.

Edge doesn't support `:placeholder-shown`. There are implementations that use `:valid` selector but it has drawbacks with validation so I decided not to use it.

Due to Edge issue, I reversed the order of label styling. By default labels are now in "active" state and floating label animation is used only if a browser supports `:placeholder-shown`. So the form is still functional but there are no animated labels.

IE 11 and even IE 10 can be supported with `:-ms-input-placeholder` selector.

It's not possible to use `::after` pseudo-element anymore because it can't be applied to input or textarea fields. CSS parent selector would be useful here. So I have created a new div element to handle the underline bar animation.

Following CSS rules are used to style labels and underline bar.

__Label when input field contains text__
```css
.form-field__textarea:placeholder-shown ~ .form-field__label {
}
```

__Label when input field is focused__
```css
.form-field__textarea:focus ~ .form-field__label {
}
```

__Underline bar when input field is focused__
```css
.form-field__textarea:focus ~ .form-field__bar {
}
```

#### Complete styles
```scss
$primary-color: #b11adc;
$animation-duration: 0.4s;

@mixin label-inactive() {
  font-size: 1.2rem;
  transform: translateY(0);
}

@mixin label-active() {
  font-size: 0.75rem;
  transform: translateY(-14px);
}

.form-field {
  display: block;
  margin-bottom: 16px;
}
.form-field__label {
  @include label-active();
  display: block;
  font-weight: normal;
  left: 0;
  margin: 0;
  padding: 18px 12px 0;
  position: absolute;
  top: 0;
  transition: all $animation-duration;
  width: 100%;
}
.form-field__control {
  background: #eee;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.form-field__bar {
  border-bottom: 2px solid $primary-color;
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  transform: scaleX(0);
  transition: all $animation-duration;
  width: 1%;
}
.form-field__input,
.form-field__textarea {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #999;
  color: #333;
  display: block;
  font-size: 1.2rem;
  margin-top: 24px;
  outline: 0;
  padding: 0 12px 10px 12px;
  width: 100%;
  
  // IE 10-11
  &:-ms-input-placeholder {
    ~ .form-field__label {
      @include label-inactive();
    }
  }
  // All other browsers except Edge
  &:placeholder-shown {
    ~ .form-field__label {
      @include label-inactive();
    }
  }
  &:focus {
    ~ .form-field__label {
      color: #b11adc;
      @include label-active();
    }
    ~ .form-field__bar {
      border-bottom: 2px solid $primary-color;
      transform: scaleX(150);
    }
  }
}
.form-field__textarea {
  height: 150px;
}
```

Well I can't say is it worth to implement this without Javascript but it was a fun experiment anyway to find out how to do it. Handling the field state in Javascript produces slightly cleaner  HTML and more understandable style declarations.

Material Design form input text fields

How to create Material Design like form text fields with floating label and animated underline bar

This post shows how to implement Material Design like form text fields with a floating label and an expanding underline bar animation. The post includes examples of how to style text fields with and without Javascript.

Lately I have experimented with [Vue.js JavaScript Framework](https://vuejs.org). In this post I will show how to build an almost functional form with Vue.js. Almost functional means that the front end will be ready but actual data handling in the back end won't be implemented.

Forms are essential part of almost every web application so I wanted to see how to build a basic form with the following specs.

## Specification

I set following specs for my form project.

- Form contains different field types.
- Textarea field must have a maximum length counter.
- There must be an inline validation for form fields.
- Summary of validation errors must be shown on submit if validation fails.
- Data will be sent via Ajax on submit and loading indicator is visible until HTTP request is finished.
- Server-side errors will be returned and handled in the same way as errors on a client-side.
- Double-clicks must be prevented by disabling the submit button when sending form.
- Thanks page will be shown after form is successfully submitted.

## Prerequisites

Vue project is generated with the [Webpack template](https://github.com/vuejs-templates/webpack).

Project needs few dependencies for functionalities which are not part of the Vue.js core:

- [Vue i18n](https://kazupon.github.io/vue-i18n/en/) is used for the internalization;
- [Vuelidate](https://monterail.github.io/vuelidate/) for the form validation; and
- [Axios HTTP client](https://github.com/axios/axios) for making requests to the back end.

Project uses [Bootstrap](https://getbootstrap.com) 4.1.0 library for the form HTML markup. [Polyfill.io](https://polyfill.io/v2/docs/) is used to provide polyfills for older browsers.

This post focuses on the front end. Back end is handled by [Mocky REST API](https://www.mocky.io). Mocky enables the one to mock HTTP responses to test REST APIs. Of course you could use any local mock server but I decided to use Mocky because it's also accessible from the GitHub page.

## Getting started

You can download the whole project from my [GitHub repository](https://github.com/teroauralinna/vue-demo-form). [Live demo](http://teroauralinna.github.io/vue-demo-form) is also available.

```bash
$ git clone https://github.com/teroauralinna/vue-demo-form.git
```

### Setup project

__Install dependencies__
```bash
$ npm install
```

### Run project

__Serve dev version from http://localhost:8080__
```bash
$ npm run dev
```

## Show me the code!

### App setup

#### ./index.html

[Bootstrap](https://getbootstrap.com/) is added from the CDN to simplify things a little bit.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vue.js Demo Form</title>
    <link rel="stylesheet" 
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
      integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
      crossorigin="anonymous">
  </head>
  <body>
    <div id="app"></div>
    
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
  </body>
</html>
```

#### ./src/resources/translations.js

This file includes all translation strings that our app uses. For a bigger app I would use translation file per language. Even though this project doesn't have multiple languages it's easier to handle form validation errors with translation strings.

```javascript
export default {
  en: {
    form: {
      firstName: "First name",
      lastName: "Last name",
      email: "Email",
      terms: "I accept the terms and conditions",
      type: "Select subscription type",
      additionalInfo: "Additional info",
      submitted: "The form is submitted!",
      sentInfo: "Here is the info you sent:",
      return: "Return to the form",
      submit: "Submit",
      submitting: "Submitting",
      charactersLeft: "You have {charCount} character left. | You have {charCount} characters left.",
      types: {
        free: "Free trial subscription",
        starter: "Starter subscription (50 € / month)",
        enterprise: "Enterprise subscription (250 € / month)"
      }
    },
    error: {
      invalidFields: "Following fields have an invalid or a missing value:",
      general: "An error happened during submit.",
      generalMessage: "Form sending failed due to technical problems. Try again later.",
      fieldRequired: "{field} is required.",
      fieldInvalid: "{field} is invalid or missing.",
      fieldMaxLength: "{field} maximum characters exceeded."
    }
  }
};
```

#### ./config/prod.env.js

In the config file you can change the API endpoint. There is one for success and one for failure. With the failure response you can see how the back end responds when there are errors.

```javascript
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  FORM_API_URL: '"https://www.mocky.io/v2/5adb5a8c2900002b003e3df1"', // Success
  //FORM_API_URL: '"https://www.mocky.io/v2/5ade0bf2300000272b4b29b9"', // Failure
}
```

__Success response from [https://www.mocky.io/v2/5adb5a8c2900002b003e3df1](https://www.mocky.io/v2/5adb5a8c2900002b003e3df1):__

```json
{
  "success": true,
  "errors": []
}
```

__Failure response from [https://www.mocky.io/v2/5ade0bf2300000272b4b29b9](https://www.mocky.io/v2/5ade0bf2300000272b4b29b9):__

```json
{
  "success": false,
  "errors": [
    {
      "field": "firstName",
      "message": null
    },
    {
      "field": "lastName",
      "message": null
    },
    {
      "field": "email",
      "message": "Email is not valid email address."
    },
    {
      "field": "additionalInfo",
      "message": "Max. 1000 characters."
    }
  ]
}
```

#### ./src/main.js

All dependencies and general configurations are inserted to the `main.js` file.

```javascript
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Vuelidate from 'vuelidate';
import App from './App.vue'
import translations from "./resources/translations";

Vue.use(VueI18n);
Vue.use(Vuelidate);

Vue.config.formApiUrl = process.env.FORM_API_URL;

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: translations
})

new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
})
```

#### ./src/App.vue

`App.vue` is the container for the app. The form component is imported here.

```html
<template>
  <div id="app" class="container">
    <div class="row justify-content-center">
      <div class="col-xs-12 col-sm-10 col-md-6">
        <h1 class="text-center">{{title}}</h1>
        <app-form></app-form>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import Form from './components/form/Form.vue';

export default {
  name: 'app',
  data () {
    return {
      title: 'Vue.js Demo Form'
    }
  },
  components: {
    appForm: Form
  }
}
</script>

<style lang="scss">
  h1 {
    margin-bottom: 30px;
  }

  #app {
    padding: 20px;
  }
</style>
```

### The form component

The form component is separated into several files: `Form.scss`, `Form.js` and `Form.vue`. The latter holds the template and requires SCSS and JS files.

#### ./src/components/form/Form.scss

```scss
pre {
    white-space: pre-line;
}

form {
    background: #efefef;
    padding: 2rem 2rem 1rem;
}
```

#### ./src/components/form/Form.js

The `Form.js` contains all logic which controls the form.

```javascript
import { required, email, maxLength } from 'vuelidate/lib/validators';
import axios from 'axios';
import Vue from 'vue';

export default {
  name: 'app-form',
  data() {
    return {
      isSubmitted: false,
      isError: false,
      errorHeader: 'error.invalidFields',
      errors: [],
      types: this.getTypes(),
      submitting: false,
      form: {
        firstName: '',
        lastName: '',
        email: '',
        terms: false,
        type: null,
        additionalInfo: ''
      }
    }
  },
  methods: {
    submit() {
      this.$v.$touch();
      if (!this.$v.$error) {
        this.sendFormData();
      } else {
        this.validationError();
      }
    },
    enableSubmitLoader() {
      this.submitting = true;
    },
    disableSubmitLoader() {
      this.submitting = false;
    },
    sendFormData() {
      this.enableSubmitLoader();
      axios.post(Vue.config.formApiUrl, this.form).then(response => {
        this.submitSuccess(response);
        this.disableSubmitLoader();
      }).catch(error => {
        this.submitError(error);
        this.disableSubmitLoader();
      });
    },
    submitSuccess(response) {
      if (response.data.success) {
        this.isSubmitted = true;
        this.isError = false;
      } else {
        this.errorHeader = 'error.invalidFields';
        this.errors = response.data.errors;
        this.isError = true;
      }
    },
    submitError(error) {
      this.errorHeader = 'error.general';
      this.errors = [{'field': null, 'message': 'error.generalMessage'}];
      this.isError = true;
    },
    validationError() {
      this.errorHeader = 'error.invalidFields';
      this.errors = this.getErrors();
      this.isError = true;
    },
    isErrorField(field) {
      try {
        if (this.getValidationField(field).$error) {
          return true;
        }
      } catch (error) {}

      return this.errors.some(el => el.field === field);
    },
    getErrors() {
      let errors = [];
      for (const field of Object.keys(this.form)) {
        try {
          if (this.getValidationField(field).$error) {
            errors.push({'field': field, 'message': null});
          }
        } catch (error) {}
      }
      return errors;
    },
    getFieldClasses(field) {
      return { 'is-invalid': this.isErrorField(field) }
    },
    getCharactersLeft(field) {
      try {
        return this.getValidationField(field).$params.maxLength.max - this.form[field].length;
      } catch (error) {
        return 0;
      }
    },
    getTypes() {
      return [{
        value: 'free', 
        label: 'form.types.free'
      }, {
        value: 'starter', 
        label: 'form.types.starter'
      }, {
        value: 'enterprise', 
        label: 'form.types.enterprise'
      }];
    },
    getValidationField(field) {
      if (this.$v.form[field]) {
        return this.$v.form[field];
      }
      throw Error('No validation for field ' + field);
    },
    onFieldBlur(field) {
      try {
        this.getValidationField(field).$touch();
        if (this.getValidationField(field).$error) {
          if (!this.errors.some(el => el.field === field)) {
            this.errors.push({'field': field, 'message': null});
          }
        } else {
          this.errors = this.errors.filter(el => el.field !== field);
        }
      } catch (error) {}
    },
    reload() {
      window.location = '';
    }
  },
  validations: {
    form: {
      email: { required, email },
      firstName: { required },
      lastName: { required },
      type: { required },
      terms: { required },
      additionalInfo: { maxLength: maxLength(1000) }
    }
  },
  watch: {
    errors() {
      this.isError = this.errors.length > 0 ? true : false;
    }
  }
}
```

#### ./src/components/form/Form.vue

This is the main component which contains the HTML template, data bindings and includes JS and SCSS files.

```html
<template>
  <div>
    <form v-if="!isSubmitted" @submit.prevent="submit" novalidate>
      <div class="form-group">
        <label for="firstName">{{ $t('form.firstName') }} *</label>
        <input type="text" class="form-control" id="firstName" v-model.lazy.trim="form.firstName" @blur="onFieldBlur('firstName')" v-bind:class="getFieldClasses('firstName')">
        <div v-if="isErrorField('firstName')" class="invalid-feedback">{{ $t('error.fieldRequired', { field: $t('form.firstName') }) }}</div>
      </div>
      <div class="form-group">
        <label for="lastName">{{ $t('form.lastName') }} *</label>
        <input type="text" class="form-control" id="lastName" v-model.lazy.trim="form.lastName" @blur="onFieldBlur('lastName')" v-bind:class="getFieldClasses('lastName')">
        <div v-if="isErrorField('lastName')" class="invalid-feedback">{{ $t('error.fieldRequired', { field: $t('form.lastName') }) }}</div>
      </div>
      <div class="form-group">
        <label for="email">{{ $t('form.email') }} *</label>
        <input type="email" class="form-control" id="email" v-model.lazy.trim="form.email" @blur="onFieldBlur('email')" v-bind:class="getFieldClasses('email')">
        <div v-if="isErrorField('email')" class="invalid-feedback">{{ $t('error.fieldInvalid', { field: $t('form.email') }) }}</div>
      </div>
      <div class="form-group">
        <label for="type">{{ $t('form.type') }} *</label>
        <select id="type" class="form-control" v-model="form.type" @blur="onFieldBlur('type')" v-bind:class="getFieldClasses('type')">
            <option v-for="type in types" v-bind:key="type.value" v-bind:value="type.value">{{ $t(type.label) }}</option>
        </select>
        <div v-if="isErrorField('type')" class="invalid-feedback">{{ $t('form.type') }}</div>
      </div>
      <div class="form-group">
        <label for="additionalInfo">{{ $t('form.additionalInfo') }}</label>
        <textarea 
          type="additionalInfo" 
          class="form-control" 
          id="additionalInfo" 
          v-model.trim="form.additionalInfo" 
          v-bind:class="getFieldClasses('additionalInfo')" 
          v-bind:maxlength="$v.form['additionalInfo'].$params.maxLength.max" 
          @blur="onFieldBlur('additionalInfo')">
        </textarea>
        <small class="text-muted form-text">{{ $tc('form.charactersLeft', getCharactersLeft('additionalInfo'), { charCount: getCharactersLeft('additionalInfo') }) }}</small>
        <div v-if="isErrorField('additionalInfo')" class="invalid-feedback">{{ $t('error.fieldMaxLength', { field: $t('form.additionalInfo') }) }}</div>
      </div>
      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="terms" v-model.lazy.trim="form.terms" @change="onFieldBlur('terms')" v-bind:class="getFieldClasses('terms')">
          <label class="form-check-label" for="terms">{{ $t('form.terms') }} *</label>
        </div>
      </div>
      <div class="alert alert-danger" v-if="isError">
        <p class="mb-0">
          <strong>{{ $t(errorHeader) }}</strong>
        </p>
        <ul class="mb-0 pl-3" v-if="errors.length > 0">
          <li v-for="error in errors" v-bind:key="error.field">
            <span v-if="error.field">{{ $t('form.'+error.field) }}<span v-if="error.message">: {{ $t(error.message) }}</span></span>
            <span v-else-if="error.message">{{ $t(error.message) }}</span>
          </li>
        </ul>
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary" :disabled="submitting">
          <span v-if="submitting">{{ $t('form.submitting' ) }} <img src="../../assets/loader.svg" /></span>
          <span v-else>{{ $t('form.submit' ) }}</span>
        </button>
      </div>
    </form>
    <div v-else>
      <div class="alert alert-success">
        <strong>{{ $t('form.submitted' ) }}</strong>
      </div>
      <div class="alert alert-info">
        <p><strong>{{ $t('form.sentInfo' ) }}</strong></p>
        <pre>
            {{form}}
        </pre>
      </div>
      <p class="text-center">
        <a href="#" class="btn btn-secondary" @click.prevent="reload()">{{ $t('form.return' ) }}</a>
      </p>
    </div>
  </div>
</template>

<script src="./Form.js"></script>
<style src="./Form.scss" lang="scss" scoped></style>
```

## Further development ideas

For a real project I would consider refactoring common code from the `Form.js` into reusable services. I also would create a component per field type to avoid code duplication and for reusing fields in other forms. Another thing which tempts me is to create a model which represents the whole form. This model would include properties per form field like type, label, validation rules etc. Then forms could be generated dynamically based on the form model. Well this might be a topic for an upcoming blog post.

Vue.js

How to build a complete form with Vue.js

Lately I have experimented with Vue.js JavaScript Framework. In this post I will show how to build a functional form with Vue.js. Forms are essential part of almost every web application so I wanted to see how to build a basic form with the following specs.

Blog posts related to form

How to create Material Design like form text fields with floating label and animated underline bar

How to build a complete form with Vue.js