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
          
                    onChange
                  
                    *
                  
                  function
                
                  -
              
                    options
                  
                    *
                  
                  enum
                
                  -
              
                    selected
                  
                    *
                  
                  any
                
                  -
              
                    beforeOptionsComponent
                  
                  string
                
                  -
              
                    buildSelection
                  
                  function
                
                  -
              
                    closeOnSelect
                  
                  boolean
                
                  -
              
                    containerClass
                  
                  string
                
                  -
              
                CSS classes to be added in the container element
              
                    defaultHighlighted
                  
                  any
                
                  -
              
                    errors
                  
                  enum
                
                  -
              
                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
                
                  -
              
                    isMultiple
                  
                  boolean
                
                  -
              
                If is multiple select instead of single
              
                    label
                  
                  string
                
                  -
              
                The input field label
              
                    matcher
                  
                  function
                
                  -
              
                    matchTriggerWidth
                  
                  boolean
                
                  -
              
                    noMatchesMessage
                  
                  string
                
                  -
              
                    noMatchesMessageComponent
                  
                  string
                
                  -
              
                    onBlur
                  
                  function
                
                  -
              
                    onClose
                  
                  function
                
                  -
              
                    onFocus
                  
                  function
                
                  -
              
                    onFocusIn
                  
                  function
                
                  -
              
                    onFocusOut
                  
                  function
                
                  -
              
                    onInput
                  
                  function
                
                  -
              
                    onKeydown
                  
                  function
                
                  -
              
                    onOpen
                  
                  function
                
                  -
              
                    optionsComponent
                  
                  string
                
                  -
              
                    placeholderComponent
                  
                  string
                
                  -
              
                    registerAPI
                  
                  function
                
                  -
              
                    scrollTo
                  
                  function
                
                  -
              
                    search
                  
                  function
                
                  -
              
                    searchEnabled
                  
                  boolean
                
                  -
              
                    searchField
                  
                  string
                
                  -
              
                    searchMessage
                  
                  string
                
                  -
              
                    searchMessageComponent
                  
                  string
                
                  -
              
                    showError
                  
                  boolean
                
                  -
              
                Force displaying errors
              
                    size
                  
                  enum
                
                  -
              
                The size
              
                    tabindex
                  
                  enum
                
                  -
              
                    triggerComponent
                  
                  string
                
                  -
              
                    typeAheadOptionMatcher
                  
                  function
                
                  -

Name	Type	Default	Description
`onChange` *	`function`	-
`options` *	`enum`	-
`selected` *	`any`	-
`beforeOptionsComponent`	`string`	-
`buildSelection`	`function`	-
`closeOnSelect`	`boolean`	-
`containerClass`	`string`	-	CSS classes to be added in the container element
`defaultHighlighted`	`any`	-
`errors`	`enum`	-	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`	-
`isMultiple`	`boolean`	-	If is multiple select instead of single
`label`	`string`	-	The input field label
`matcher`	`function`	-
`matchTriggerWidth`	`boolean`	-
`noMatchesMessage`	`string`	-
`noMatchesMessageComponent`	`string`	-
`onBlur`	`function`	-
`onClose`	`function`	-
`onFocus`	`function`	-
`onFocusIn`	`function`	-
`onFocusOut`	`function`	-
`onInput`	`function`	-
`onKeydown`	`function`	-
`onOpen`	`function`	-
`optionsComponent`	`string`	-
`placeholderComponent`	`string`	-
`registerAPI`	`function`	-
`scrollTo`	`function`	-
`search`	`function`	-
`searchEnabled`	`boolean`	-
`searchField`	`string`	-
`searchMessage`	`string`	-
`searchMessageComponent`	`string`	-
`showError`	`boolean`	-	Force displaying errors
`size`	`enum`	-	The size
`tabindex`	`enum`	-
`triggerComponent`	`string`	-
`typeAheadOptionMatcher`	`function`	-

Blocks

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