Text Inputs

Standard text inputs — Octane has no two-way binding, so you wire value in and an input handler out.

4 min read Level 1/5 #ember#forms#input

What you'll learn

Bind value to a tracked property
Update the property in an input handler
Handle different input types like text, number, email

The standard input pattern in Octane is a value attribute plus an on-input listener — no two-way binding, no magic. You stay in control of the data flow.

Text Input

<input
  type="text"
  value={{this.email}}
  {{on "input" this.updateEmail}}
/>

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class EmailField extends Component {
  @tracked email = '';

  @action
  updateEmail(e) {
    this.email = e.target.value;
  }
}

Number Inputs

e.target.value is always a string. Coerce when you need a number:

@tracked age = 0;

@action
updateAge(e) {
  this.age = Number(e.target.value);
}

Other Input Types

The pattern is identical for type="email", type="url", type="search", type="password". For checkboxes, read e.target.checked instead of e.target.value.

<input type="checkbox" checked={{this.agreed}} {{on "change" this.toggle}} />

Textareas →