Skip to content


Repository files navigation


CI Ember Observer Score npm version

Integrate Ember Power Select into your Ember Bootstrap forms.


  • Ember Power Select v6 or above
  • Ember Bootstrap v5 or above
  • Ember.js v3.28 or above
  • Ember CLI v3.28 or above
  • Node.js v14 or above


ember install ember-bootstrap-power-select

This will additionally install ember-power-select into your app, and setup its Bootstrap theme, either by importing the appropriate Less or Sass file (if you use one of these preprocessors), or by editing your ember-cli-build.js to include the static theme CSS (if you use plain CSS).


With this addon installed, you have a new controlType of power-select available. Use the options property to set the array of selectable options:

<BsForm @model={{yourModel}} as |form|>
  <form.element @controlType="power-select" @property="foo" @label="Choose" @options={{options}} />

If your options array consists of objects, use the optionLabelPath to specify the property that should be used as the options label:

<BsForm @model={{yourModel}} as |form|>
  <form.element @controlType="power-select" @property="foo" @label="Choose" @options={{options}} @optionLabelPath="title" />

If you need more control over how the options label are rendered (e.g. for formatting or internalization) you should use the yielded <control> component in block mode:

<BsForm @model={{yourModel}} as |form|>
  <form.element @controlType="power-select" @property="author" @label="Author" @options={{options}} as |el|>
    <el.control as |option|>
      {{}} (b. {{format-date option.dayOfBirth}})

Power Select Multiple

The power-select-multiple is also supported and works similarly to the power-select implementation.

<BsForm @model={{yourModel}} as |form|>
  <form.element @controlType="power-select-multiple" @property="foo" @label="Choose" @options={{options}} />

Advanced usage

If you need more control of the power-select configuration, use the yielded control component to get direct access to the power-select component. The power-select's selected, disabled properties and the onChange action are already wired up to the controlling form.element for you. Set any other options as you need:

<BsForm @model={{yourModel}} as |form|>
  <form.element @controlType="power-select" @property="foo" @label="Choose" @options={{options}} as |el|>
    <el.control @searchEnabled={{true}} @searchPlaceholder="Type your name" />

Please consult the Ember Power Select documentation for all available options.


See the Contributing guide for details.


This project is licensed under the MIT License.