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
                
                  -
              
                    afterOptionsComponent
                  
                  enum
                
                  -
              
                    allowClear
                  
                  boolean
                
                  -
              
                    animationEnabled
                  
                  boolean
                
                  -
              
                    ariaDescribedBy
                  
                  string
                
                  -
              
                    ariaInvalid
                  
                  string
                
                  -
              
                    ariaLabel
                  
                  string
                
                  -
              
                    ariaLabelledBy
                  
                  string
                
                  -
              
                    beforeOptionsComponent
                  
                  enum
                
                  -
              
                    buildSelection
                  
                  function
                
                  -
              
                    calculatePosition
                  
                  function
                
                  -
              
                    closeOnSelect
                  
                  boolean
                
                  -
              
                    containerClass
                  
                  string
                
                  -
              
                CSS classes to be added in the container element
              
                    defaultHighlighted
                  
                  any
                
                  -
              
                    destination
                  
                  string
                
                  -
              
                    disabled
                  
                  boolean
                
                  -
              
                    dropdownClass
                  
                  string
                
                  -
              
                    ebdContentComponent
                  
                  enum
                
                  -
              
                    ebdTriggerComponent
                  
                  enum
                
                  -
              
                    errors
                  
                  enum
                
                  -
              
                A list of errors or a single text describing the error
              
                    eventType
                  
                  string
                
                  -
              
                    extra
                  
                  any
                
                  -
              
                    groupComponent
                  
                  enum
                
                  -
              
                    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
              
                    horizontalPosition
                  
                  string
                
                  -
              
                    initiallyOpened
                  
                  boolean
                
                  -
              
                    isMultiple
                  
                  boolean
                
                  -
              
                If is multiple select instead of single
              
                    label
                  
                  string
                
                  -
              
                The input field label
              
                    labelClass
                  
                  string
                
                  -
              
                    labelClickAction
                  
                  enum
                
                  -
              
                    labelComponent
                  
                  enum
                
                  -
              
                    labelText
                  
                  string
                
                  -
              
                    loadingMessage
                  
                  string
                
                  -
              
                    matcher
                  
                  function
                
                  -
              
                    matchTriggerWidth
                  
                  boolean
                
                  -
              
                    noMatchesMessage
                  
                  string
                
                  -
              
                    noMatchesMessageComponent
                  
                  enum
                
                  -
              
                    onBlur
                  
                  function
                
                  -
              
                    onClose
                  
                  function
                
                  -
              
                    onFocus
                  
                  function
                
                  -
              
                    onFocusIn
                  
                  function
                
                  -
              
                    onFocusOut
                  
                  function
                
                  -
              
                    onInput
                  
                  function
                
                  -
              
                    onKeydown
                  
                  function
                
                  -
              
                    onOpen
                  
                  function
                
                  -
              
                    options
                  
                  enum
                
                  -
              
                    optionsComponent
                  
                  enum
                
                  -
              
                    placeholder
                  
                  string
                
                  -
              
                    placeholderComponent
                  
                  enum
                
                  -
              
                    preventScroll
                  
                  boolean
                
                  -
              
                    registerAPI
                  
                  function
                
                  -
              
                    renderInPlace
                  
                  boolean
                
                  -
              
                    required
                  
                  string
                
                  -
              
                    resultCountMessage
                  
                  function
                
                  -
              
                    rootEventType
                  
                  enum
                
                  -
              
                    scrollTo
                  
                  function
                
                  -
              
                    search
                  
                  function
                
                  -
              
                    searchEnabled
                  
                  boolean
                
                  -
              
                    searchField
                  
                  string
                
                  -
              
                    searchMessage
                  
                  string
                
                  -
              
                    searchMessageComponent
                  
                  enum
                
                  -
              
                    searchPlaceholder
                  
                  string
                
                  -
              
                    selected
                  
                  any
                
                  -
              
                    selectedItemComponent
                  
                  enum
                
                  -
              
                    showError
                  
                  boolean
                
                  -
              
                Force displaying errors
              
                    size
                  
                  enum
                
                  -
              
                The size
              
                    tabindex
                  
                  enum
                
                  -
              
                    title
                  
                  string
                
                  -
              
                    triggerClass
                  
                  string
                
                  -
              
                    triggerComponent
                  
                  enum
                
                  -
              
                    triggerId
                  
                  string
                
                  -
              
                    triggerRole
                  
                  string
                
                  -
              
                    typeAheadOptionMatcher
                  
                  function
                
                  -
              
                    verticalPosition
                  
                  string
                
                  -

Name	Type	Default	Description
`onChange` *	`function`	-
`afterOptionsComponent`	`enum`	-
`allowClear`	`boolean`	-
`animationEnabled`	`boolean`	-
`ariaDescribedBy`	`string`	-
`ariaInvalid`	`string`	-
`ariaLabel`	`string`	-
`ariaLabelledBy`	`string`	-
`beforeOptionsComponent`	`enum`	-
`buildSelection`	`function`	-
`calculatePosition`	`function`	-
`closeOnSelect`	`boolean`	-
`containerClass`	`string`	-	CSS classes to be added in the container element
`defaultHighlighted`	`any`	-
`destination`	`string`	-
`disabled`	`boolean`	-
`dropdownClass`	`string`	-
`ebdContentComponent`	`enum`	-
`ebdTriggerComponent`	`enum`	-
`errors`	`enum`	-	A list of errors or a single text describing the error
`eventType`	`string`	-
`extra`	`any`	-
`groupComponent`	`enum`	-
`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
`horizontalPosition`	`string`	-
`initiallyOpened`	`boolean`	-
`isMultiple`	`boolean`	-	If is multiple select instead of single
`label`	`string`	-	The input field label
`labelClass`	`string`	-
`labelClickAction`	`enum`	-
`labelComponent`	`enum`	-
`labelText`	`string`	-
`loadingMessage`	`string`	-
`matcher`	`function`	-
`matchTriggerWidth`	`boolean`	-
`noMatchesMessage`	`string`	-
`noMatchesMessageComponent`	`enum`	-
`onBlur`	`function`	-
`onClose`	`function`	-
`onFocus`	`function`	-
`onFocusIn`	`function`	-
`onFocusOut`	`function`	-
`onInput`	`function`	-
`onKeydown`	`function`	-
`onOpen`	`function`	-
`options`	`enum`	-
`optionsComponent`	`enum`	-
`placeholder`	`string`	-
`placeholderComponent`	`enum`	-
`preventScroll`	`boolean`	-
`registerAPI`	`function`	-
`renderInPlace`	`boolean`	-
`required`	`string`	-
`resultCountMessage`	`function`	-
`rootEventType`	`enum`	-
`scrollTo`	`function`	-
`search`	`function`	-
`searchEnabled`	`boolean`	-
`searchField`	`string`	-
`searchMessage`	`string`	-
`searchMessageComponent`	`enum`	-
`searchPlaceholder`	`string`	-
`selected`	`any`	-
`selectedItemComponent`	`enum`	-
`showError`	`boolean`	-	Force displaying errors
`size`	`enum`	-	The size
`tabindex`	`enum`	-
`title`	`string`	-
`triggerClass`	`string`	-
`triggerComponent`	`enum`	-
`triggerId`	`string`	-
`triggerRole`	`string`	-
`typeAheadOptionMatcher`	`function`	-
`verticalPosition`	`string`	-

Blocks

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