Components chevron_right Select

GitHub

Basic Usage

Enter an address

Disable select

Template

<PaperInput @label="Street Name" @value={{this.street}} @onChange={{fn (mut this.street)}} />
<PaperInput @label="City" @value={{this.city}} @onChange={{fn (mut this.city)}} />
<PaperSelect @disabled={{this.disableSelect}} @label="State" @options={{this.states}} @selected={{this.userState}} @onChange={{fn (mut this.userState)}} as |state|>
  {{state.abbrev}}
</PaperSelect>

Paper select is based on Ember power select, advanced documentation can be found here.

Select Helpers

Option Type Description
disabled boolean Should the select field be disabled? Default is false.
label string Field label. Same as paper-input.
options array List of selectable options.
selected object Value of selected option.

Option groups

Pick your pizza below

Template

<PaperSelect @options={{this.sizes}} @label="Size" @required={{true}} @selected={{this.pizzaSize}} @onChange={{fn (mut this.pizzaSize)}} as |size|>
  {{size}}
</PaperSelect>
<PaperSelect @options={{this.groupedToppings}} @label="Topping" @selected={{this.topping}} @onChange={{fn (mut this.topping)}} as |topping|>
  {{this.topping}}
</PaperSelect>

Options with async search

Select will correctly resolve any promise you pass to the options property.

Template

<PaperSelect @placeholder="Assign to a user" @selected={{this.selectedUser}} @options={{this.users}} @onChange={{fn (mut this.selectedUser)}} as |user|>
  {{user.name}}
</PaperSelect>

{{#if this.selectedUser}}
  <p>You have selected the user <code>{{this.selectedUser.name}}</code></p>
{{/if}}

Select with Search

Paper select can include a paper-input field at the top of the dropdown which acts as a live filter for the paper-select options. For additional documentation on search, please refer to the power-select docs here.

Template

<PaperSelect @placeholder="Vegetable" @selected={{this.selectedVegetable}} @options={{this.vegetables}} @searchField="name" @searchPlaceholder="Search for a vegetable.." @searchEnabled={{true}} @onChange={{fn (mut this.selectedVegetable)}} as |vegetable|>
  {{vegetable.name}}
</PaperSelect>

Select Search Helpers

Option Type Description
searchEnabled boolean Enable paper-select to be searchable. Default is false.
searchField string Field name of provided options which search filter should compare against.
searchPlaceholder string Placeholder for paper-input which is displayed at top of paper-select dropdown.