Input Components

<label for="facebook">Facebook</label>
<Input @id="facebook" @value="http://www.facebook.com" />

Will become:

<label for="facebook">Facebook</label>
<input id="facebook" 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:

<label for="firstname">First Name</label>
<Input @id="firstname" @type="text" @value={{this.firstName}} @size="50" disabled={{this.entryNotAllowed}} />

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

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

<label for="firstname">First Name</label>
<Input @id="firstname" @value={{this.firstName}} @key-press={{action "updateFirstName"}} />

The following event types are supported (dasherized format):

• enter
• insert-newline
• escape-press
• focus-in
• focus-out
• key-press
• key-up

More event types are also supported but these events need to be written in camelCase format, such mouseEnter. Note, there are events of the same type in both the list above and linked. Event names listed above must be dasherized. Additional work is performed on these events.

You can also use the <Input> component to create a checkbox by setting its type:

<label for="admin-checkbox">Is Admin?</label>
<Input @id="admin-checkbox" @type="checkbox" @checked={{this.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.

If you want to dispatch an action on a certain event, you will always need to define the event name in camelCase format:

<Input @id="admin-checkbox" @type="checkbox" @checked={{this.isAdmin}} @input={{this.validateRole}} />

<Textarea @value={{this.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

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 this.person this.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: {{get}} and {{mut}}.