FormSelect

We use Ember Power Select under the hood to deliver the best select experience. Please refer to their documentation for further customization.

In the example below, we have a label, hint, error validation, search and allowClear.

Examples

Single Select.

Select your country of residence

You selected, ""

<FormSelect
  @hint="Select your country of residence"
  @errors={{this.countryErrors}}
  @allowClear={{true}}
  @label="Country"
  @searchEnabled={{true}}
  @searchField="name"
  @options={{this.countries}}
  @selected={{this.country}}
  @onChange={{this.setCountry}}
  as |country|
>
  {{country.name}}
</FormSelect>

<p class="mt-4">
  You selected, "{{this.country.name}}"
</p>

Multiple Select

Edit this demo

In example you can select multiple options. To enable multiple select, just pass @isMultiple={{true}} to the component.

Select all countries you have lived

You selected, ""

<FormSelect
  @isMultiple={{true}}
  @hint="Select all countries you have lived"
  @errors={{this.countryErrors}}
  @allowClear={{true}}
  @label="Countries"
  @options={{this.countries}}
  @selected={{this.selectedCountries}}
  @onChange={{this.setCountry}}
  as |country|
>
  {{country}}
</FormSelect>

<p class="mt-4">
  You selected, "{{this.selectedCountries}}"
</p>

API

Arg Type Description Required Default
onChange (selection: any, select: Select, event?: Event) => void Yes -
options any[] | PromiseProxy<any[]> Yes -
selected any Yes -
buildSelection (selected: any, select: Select) => any - -
closeOnSelect boolean - -
containerClass string CSS classes to be added in the container element - -
defaultHighlighted any - -
errors string | string[] A list of errors or a single text describing the error - -
hasError boolean If has errors - -
hasSubmitted boolean If the form has been submitted, used to force displaying errors - -
highlightOnHover boolean - -
hint string A help text to be displayed - -
initiallyOpened boolean - -
label string The input field label - -
matcher MatcherFn - -
matchTriggerWidth boolean - -
noMatchesMessage string - -
onBlur (select: Select, event: FocusEvent) => void - -
onClose (select: Select, e: Event) => boolean - -
onFocus (select: Select, event: FocusEvent) => void - -
onFocusIn (select: Select, event: FocusEvent) => void - -
onFocusOut (select: Select, event: FocusEvent) => void - -
onInput (term: string, select: Select, e: Event) => string | false | void - -
onKeydown (select: Select, e: KeyboardEvent) => boolean - -
onOpen (select: Select, e: Event) => boolean - -
placeholderComponent string - -
registerAPI (select: Select) => void - -
scrollTo (option: any, select: Select) => void - -
search (term: string, select: Select) => any[] | PromiseProxy<any[]> - -
searchEnabled boolean - -
searchField string - -
searchMessage string - -
size 'sm' | 'lg' The size - -
tabindex string | number - -
triggerComponent string - -
typeAheadOptionMatcher MatcherFn - -