Composable Form

components.ac-field-email.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: ''
});

components.ac-field-password.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: ''
});

components.ac-field.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['field']
});

components.ac-form.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'form'
});

components.ac-input.js

import Ember from 'ember';

export default Ember.TextField.extend({
});

components.ac-label.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'label'
});

controllers.application.js

import Ember from 'ember';

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

styles.app.css

@import url('https://fonts.googleapis.com/css?family=Ubuntu');

body {
  font-family: "Ubuntu", sans-serif;
  padding: 2rem;
}

.ember-application > div {
  display: flex;
  flex-direction: column;
  justify-content: center;  
}

form {
  max-width: 930px;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0 0 8rem 0;
}

h2 {
  text-align: center;
}

input {
  padding: 1rem;
}

label {
  text-transform: uppercase;
  margin: 0 0 0.5rem 0;
}

.field {
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.actions {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  background-color: #5996E9;
  background-image: linear-gradient(#5996E9, #69B1FF);
  border-color: transparent;
  border-bottom-color: #69B1FF;
  border-radius: 3px;
  border: 1px solid #5996E9;
  box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.12);
  color: #fff;
  font-weight: bold;
  padding: 1rem 4rem;
  cursor: pointer;
}

templates.application.hbs

{{#ac-form as |form|}}
  <h2>Sign in</h2>
  {{form.field-email}}
  {{form.field-password}}
  <div class="actions">
    <button type="submit">Sign in</button>
  </div>
{{/ac-form}}

{{#ac-form as |form|}}
  <h2>Add User</h2>
  {{#form.field as |field|}}
    {{#field.label}}First Name{{/field.label}}
    {{field.input type="text"}}
  {{/form.field}}
  {{form.field-email}}
  {{form.field-password}}
  <div class="actions">
    <button type="submit">Register User</button>
  </div>
{{/ac-form}}

templates.components.ac-field-email.hbs

{{#ac-field as |field|}}
	{{#field.label}}Email{{/field.label}}
	{{field.input type="email"}}
{{/ac-field}}

templates.components.ac-field-password.hbs

{{#ac-field as |field|}}
	{{#field.label}}Password{{/field.label}}
	{{field.input type="password"}}
{{/ac-field}}

templates.components.ac-field.hbs

{{yield (hash
	label=(component "ac-label")
  input=(component "ac-input")
  email=(component "ac-field-email")
)}}

templates.components.ac-form.hbs

{{yield (hash
	field=(component "ac-field")
  field-email=(component "ac-field-email")
  field-password=(component "ac-field-password")
)}}

templates.components.ac-input.hbs

{{yield}}

templates.components.ac-label.hbs

{{yield}}

twiddle.json

{
  "version": "0.12.1",
  "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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}