home
  • Blog
1.10
  • Getting Started
  • Getting Ember
  • Concepts
  • The Object Model
  • Application
  • Templates
    • The Application Template
    • Handlebars Basics
    • Conditionals
    • Displaying a List of Items
    • Binding Element Attributes
    • Binding Element Class Names
    • Links
    • Actions
    • Input Helpers
    • Development Helpers
    • Rendering with Helpers
    • Writing Helpers
  • Routing
  • Components
  • Controllers
  • Models
  • Views
  • Enumerables
  • Testing
  • Configuring Ember.js
  • Cookbook
  • Understanding Ember.js
  • Contributing to Ember.js
Old Guides - You are viewing the guides for Ember v1.10.0.
Go to v5.0.0

Input Helpers

Edit pencil

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.

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` 

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 action="updateFirstName" on="key-press"}}

Event Names must be dasherized when assigned to on.

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

Extending Built-In Controls

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

left arrow
Actions
Development Helpers
right arrow
On this page

  • Input Helpers
  • Text fields
  • Actions
  • Checkboxes
  • Text Areas
  • Extending Built-In Controls
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2023 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue