Selects & Multi-Selects

Select dropdowns follow the same pattern as inputs — a value attribute and a change listener. Multi-select reads selectedOptions.

4 min read Level 2/5 #ember#forms#select

What you'll learn

Render a select with option children
Bind value to a tracked property
Handle change to update tracked state

The <select> element listens for change, not input — otherwise the pattern is the same as text inputs.

Single Select

<select value={{this.color}} {{on "change" this.pick}}>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

@tracked color = 'red';

@action
pick(e) {
  this.color = e.target.value;
}

Render Options From Data

Use {{#each}} to render options from a tracked or argument-passed list:

<select {{on "change" this.pick}}>
  {{#each @options as |opt|}}
    <option value={{opt.id}} selected={{eq opt.id this.selected}}>
      {{opt.label}}
    </option>
  {{/each}}
</select>

Multi-Select

Add the multiple attribute, then read selectedOptions in the handler:

<select multiple {{on "change" this.pickMany}}>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

@tracked colors = [];

@action
pickMany(e) {
  this.colors = [...e.target.selectedOptions].map((o) => o.value);
}

Built-In Helpers →