New Form Input

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'New Form Input'
});

application.template.hbs

<h1>{{appName}}</h1>

<form>
  <fieldset>
    {{form-input label="First Name:"}}
    {{form-input label="Last Name:"}}
    {{form-input label="Email:"}}
    {{form-input label="Confirm Email:"}}
  </fieldset>
</form>

form-input.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  tagName: 'div',
  classNames: ['form-input'],
  classNameBindings: [],
    
  inputId: Ember.computed('elementId', {
    get() {
      return `${this.get('elementId')}_form-input`;
    }
  })
  
});

form-input.template.hbs

<label class="label {{labelClass}}" for={{inputId}}>
  {{label}}
</label>
<input class="input {{inputClass}}" id={{inputId}} type="text" placeholder=" ">

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

* {
  box-sizing: border-box;
}
form {
  display: flex;
}
fieldset {
  flex: 1;
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  border: none;
  margin: 0;
  padding: 0;
}

.form-input {
  display: table-row;
  margin: 0 0 4px;
  padding: 0;
}

.form-input > .label {
  display: table-cell;
  font-size: 11px;
  color: rgba(225, 0, 0, .7);
  padding: 0 16px 0 0;
}

.form-input > .input {
  display: table-cell;
  width: 100%;
  color: rgba(0, 0, 0, .7);
  font-size: 16px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background-color: rgba(225, 0, 0, .02);
  box-shadow: inset 0 0 2px rgba(225, 0, 0, .4), inset 0 1px 2px rgba(225, 0, 0, .4);
  outline: none;
  padding: 0 4px;
  transition: 100ms;
}

.form-input > .input:focus {
  background-color: rgba(255, 255, 255, 9);
   box-shadow: 0 0 2px rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .2);
  transform: translate3d(0, -1px, 0);
}

twiddle.json

{
  "version": "0.5.3",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.3.1/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.3.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
  }
}