New Twiddle

components.ui-input.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames:['ui-input'],
  classNameBindings:[
    'isFilled:has-value'
  ],
  currentValue: '',
  isFilled: Ember.computed.notEmpty('currentValue'),
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

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

* {
 box-sizing: border-box;
}

.ui-input { position: relative }

.ui-input > input{
  position: relative;
  height: 50px;
  border:1px solid #a7a7a7;
  border-radius:2px;
  outline: 0;
  width:200px;
  font-size:16px;
  padding-left:15px
}

.ui-input > label{
  position: absolute;
  line-height: 50px;
  left:15px;
  font-size: 14px;
  pointer-events:none;
  opacity:0.5;
  transition: all .25s
}

.ui-input > input:focus ,
.ui-input.has-value > input {
	 padding-top: 15px
}

.ui-input > input:focus + label,
.ui-input.has-value > input + label {
	 transform: scale(0.8) translate(-12px,-15px);
   opacity:1;
}

templates.application.hbs

<br>
<br>

{{ui-input label="E-Mail Address" 
					 kind="input"
					 type="url"
           required=true
           error="Please provide valid email"
		}}
	
{{outlet}}
<br>
<br>

templates.components.ui-input.hbs

<input id="test"
			 required={{required}}
       value={{currentValue}}
       type={{type}}
       oninput={{action (mut currentValue 'target.value')
       									value='target.value' }}  />
       
<label for="test">{{label}} </label>

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.8.0",
    "ember-data": "2.8.0",
    "ember-template-compiler": "2.8.0",
    "ember-testing": "2.8.0"
  },
  "addons": {}
}