ember-bootstrap-power-select
Advanced tools
Integrate ember-power-select into your ember-bootstrap forms
Integrate Ember Power Select into your Ember Bootstrap forms.
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}}
/>
</BsForm>
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"
/>
</BsForm>
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|>
{{option.name}}
(b.
{{format-date option.dayOfBirth}})
</el.control>
</form.element>
</BsForm>
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}}
/>
</BsForm>
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" />
</form.element>
</BsForm>
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.
v6.0.0 (2025-09-25)
FAQs
Integrate ember-power-select into your ember-bootstrap forms
The npm package ember-bootstrap-power-select receives a total of 728 weekly downloads. As such, ember-bootstrap-power-select popularity was classified as not popular.
We found that ember-bootstrap-power-select demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CTO Ahmad Nassri discusses why supply chain attacks now target developer machines and what AI means for the future of enterprise security.
Security News
Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.
Security News
Experts push back on new claims about AI-driven ransomware, warning that hype and sponsored research are distorting how the threat is understood.