Input Helpers

The {{input}} and {{textarea}} helpers in Ember.js are the easiest way to create common form controls. The {{input}} helper wraps the built-in Ember.TextField and Ember.Checkbox views, while {{textarea}} wraps Ember.TextArea. Using these helpers, you can create these views with declarations almost identical to how you'd create a traditional <input> or <textarea> element.

{{input value="http://www.facebook.com"}}

Will become:

<input type="text" value="http://www.facebook.com"/>

You can pass the following standard <input> attributes within the input helper:

If these attributes are set to a quoted string, their values will be set directly on the element, as in the previous example. However, when left unquoted, these values will be bound to a property on the template's current rendering context. For example:

{{input type="text" value=firstName disabled=entryNotAllowed size="50"}}

Will bind the disabled attribute to the value of entryNotAllowed in the current context.

To dispatch an action on specific events, such as enter or key-press, use the following

{{input value=firstName action="updateFirstName" on="key-press"}}

Event Names must be dasherized when assigned to on.

You can also use the {{input}} helper to create a checkbox by setting its type:

{{input type="checkbox" name="isAdmin" checked=isAdmin}}

Checkboxes support the following properties:

• checked
• disabled
• tabindex
• indeterminate
• name
• autofocus
• form

Which can be bound or set as described in the previous section.

{{textarea value=name cols="80" rows="6"}}

Will bind the value of the text area to name on the current context.

{{textarea}} supports binding and/or setting the following properties:

• value
• name
• rows
• cols
• placeholder
• disabled
• maxlength
• tabindex
• selectionEnd
• selectionStart
• selectionDirection
• wrap
• readonly
• autofocus
• form
• spellcheck
• required

See the Built-in Views section of these guides to learn how to further extend these views.