Textareas

Textareas follow the same value plus on-input pattern as text inputs — only the element name changes.

3 min read Level 1/5 #ember#forms#textarea

What you'll learn

Bind value to a tracked property
Handle the input event to update the property
Set rows and cols attributes for sizing

A <textarea> in Ember works exactly like an <input> — bind value, listen for input, write to tracked state.

Basic Textarea

<label>
  Bio
  <textarea
    rows="4"
    cols="50"
    value={{this.bio}}
    {{on "input" this.setBio}}
  ></textarea>
</label>

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

export default class BioField extends Component {
  @tracked bio = '';

  @action
  setBio(e) {
    this.bio = e.target.value;
  }
}

Auto-Resize Hint

There is no built-in autosize — typically you reach for a small modifier or an addon like ember-autoresize. The DOM API is simple:

@action
autosize(e) {
  e.target.style.height = 'auto';
  e.target.style.height = e.target.scrollHeight + 'px';
}

Wire it as a second {{on "input"}} modifier on the same element.

Selects & Multi-Selects →