Input Helpers

The {{input}} and {{textarea}} helpers in Ember.js are the easiest way to create common form controls. Using these helpers, you can create form controls that are almost identical to the native HTML <input> or <textarea> elements, but are aware of Ember's two-way bindings and can automatically update.

Text fields

{{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:

`readonly` `required` `autofocus`
`value` `placeholder` `disabled`
`size` `tabindex` `maxlength`
`name` `min` `max`
`pattern` `accept` `autocomplete`
`autosave` `formaction` `formenctype`
`formmethod` `formnovalidate` `formtarget`
`height` `inputmode` `multiple`
`step` `width` `form`
`selectionDirection` `spellcheck` `type`

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.

Actions

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

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

Event Names must be dasherized.

Checkboxes

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.

Text Areas

{{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

Binding dynamic attribute

You might need to bind a property dynamically to an input if you're building a flexible form, for example. To achieve this you need to use the {{get}} and {{mut}} in conjunction like shown in the following example:

{{input value=(mut (get person field))}}

The {{get}} helper allows you to dynamically specify which property to bind, while the {{mut}} helper allows the binding to be updated from the input. See the respective helper documentation for more detail.

© 2020 Yehuda Katz, Tom Dale and Ember.js contributors
Licensed under the MIT License.
https://guides.emberjs.com/v2.18.0/templates/input-helpers