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.
Single Select.
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>
In example you can select multiple options. To enable multiple select,
just pass @isMultiple={{true}} to the component.
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>
| Arg | Type | Description | Required | Default |
|---|---|---|---|---|
onChange
|
(selection: any, select: Select, event?: Event) => void
|
Yes | - | |
options
|
any[] | PromiseProxy<any[]>
|
Yes | - | |
selected
|
any
|
Yes | - | |
beforeOptionsComponent
|
string
|
- | - | |
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 | - | - |
groupComponent
|
string
|
- | - | |
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
|
- | - | |
noMatchesMessageComponent
|
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
|
- | - | |
optionsComponent
|
string
|
- | - | |
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
|
- | - | |
searchMessageComponent
|
string
|
- | - | |
showError
|
boolean
|
Force displaying errors | - | - |
size
|
'sm' | 'lg'
|
The size | - | - |
tabindex
|
string | number
|
- | - | |
triggerComponent
|
string
|
- | - | |
typeAheadOptionMatcher
|
MatcherFn
|
- | - |