Form Structure

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Form Components',
  
  actions: {
    toggleError() {
      this.toggleProperty('isError');
    }
  }
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<p>Notes:</p>
<ol>
  <li>Textarea components should use <code>vertical-align: text-top</code> with a <code>padding-top</code></li>
  <li>text inputs should use <code>vertical-align: baseline</code></li>
</ol>

<button type="button" {{action "toggleError"}}>Toggle Error</button>

<br>
<br>

<form class="form-component">
  <fieldset class="fieldset-component">
  	<legend class="legend-component">General Info</legend>
    <div class="fieldset-content">
      <p class="form-control-component">
        <label class="label-component">Name:</label>
        <input class="input-component" type="text">
        {{#if isError}}
          <span class="error-component">Required</span>
        {{/if}}
      </p>
      <div class="form-control-component">
        <label class="label-component">SSN:</label>
        <input class="input-component" type="text">
        {{#if isError}}
          <span class="error-component">999-99-9999</span>
        {{/if}}
      </div>
      <span class="form-control-component">
        <label class="label-component">DOB:</label>
        <input class="input-component" type="text">
        {{#if isError}}
          <span class="error-component">MM-DD-YYYY</span>
        {{/if}}
      </span>
      <span class="form-control-component">
        <label class="label-component">Email:</label>
        <input type="number" class="input-component">
        {{#if isError}}
          <span class="error-component">Must be number</span>
        {{/if}}
      </span>
    </div>
  </fieldset>
</form>

styles.app.css

html {
  font-size: 16px;
}

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.25;
}

*, *:after, *:before, input, fieldset {
  box-sizing: border-box;
}

input, textarea {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.form-component {}

.fieldset-component {
  display: block;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
  margin: 0;
  padding: 8px 0 16px;
  outline: 0;
}

.legend-component {
  display: block;
  font-size: 12px;
  font-weight: bold;
  margin: 0 !important;
  padding: 0 8px 0 0;
}

.fieldset-content {
  display: block;
  padding: 0;
}

.form-control-component {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin: 0 0 4px;
  padding: 0;
  position: relative;
}

.label-component {
  width: 75px;
  flex: none;
  font-size: .75rem;
  padding-top: .25rem;
  padding-right: .5rem;
}
.input-component {
  background-color: rgba(0, 0, 0, .02);
  box-shadow: inset 0 0 1px rgba(0, 0, 0, .2), inset 0 1px 1px rgba(0, 0, 0, .2);
  border-radius: 2px;
  width: 100%;
  flex: 1;
  border: none;
  outline: 0;
  margin: 0;
}
.error-component {
  background-color: rgba(255, 255, 255, .9);
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 2px 0 0 0;
  display: block;
  height: 12px;
  text-align: right;
  font-size: 10px;
  line-height: 12px;
  color: rgba(225, 0, 0, .9);
  padding: 0 2px;
}

twiddle.json

{
  "version": "0.6.1",
  "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"
  }
}