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

Usage

Edit this demo

Single Select.

Country

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.

Countries

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

FormSelect

Element: HTMLDivElement

Arguments

Name	Type	Default	Description
`containerClass`	`string`	-	CSS classes to be added in the container element
`errors`	`enum`	-	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
`hint`	`string`	-	A help text to be displayed
`isMultiple`	`boolean`	-	If is multiple select instead of single
`label`	`string`	-	The input field label
`onFocusIn`	`function`	-
`onFocusOut`	`function`	-
`showError`	`boolean`	-	Force displaying errors
`size`	`enum`	-	The size

Blocks

Name	Type	Default	Description
`default` *	`Array`	-