Integrate Ember Power Select into your Ember Bootstrap forms.
- Ember Power Select v8.11 or above
- Ember Bootstrap v5 or above
- Ember.js v4.12 or above
- Ember CLI v4.12 or above
- Node.js v22 or above
-
Install Ember Power Select and configure it to use the Bootstrap theme.
Please see Ember Power Select documentation for details.
-
Install Ember Bootstrap Power Select
ember install ember-bootstrap-power-select
This addon provides the control components PowerSelectControl and PowerSelectMultipleControl to be used as
@controlComponent in a <BsForm>. Use the @options argument to set the available options.
import { PowerSelectControl } from "ember-bootstrap-power-select";
<template>
<BsForm @model={{yourModel}} as |form|>
<form.element
@controlComponent={{PowerSelectControl}}
@property="foo"
@label="Choose"
@options={{options}}
/>
</BsForm>
</template>If your options array consists of objects, use the optionLabelPath to specify the property that should be used as the
options label:
import { PowerSelectControl } from "ember-bootstrap-power-select";
<template>
<BsForm @model={{yourModel}} as |form|>
<form.element
@controlComponent={{PowerSelectControl}}
@property="foo"
@label="Choose"
@options={{options}}
@optionsLabelPath="title"
/>
</BsForm>
</template>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:
import { PowerSelectControl } from "ember-bootstrap-power-select";
<template>
<BsForm @model={{yourModel}} as |form|>
<form.element
@controlComponent={{PowerSelectControl}}
@label="Author"
@options={{options}}
as |el|
>
<el.control as |option|>
{{option.name}}
(b.
{{format-date option.dayOfBirth}})
</el.control>
</form.element>
</BsForm>
</template>If not yet using Embroider in optimized mode, you can invoke the same control
component by setting the @controlType to power-select.
Selecting multiple options is supported through the @multiple={{true}} argument:
import { PowerSelectControl } from "ember-bootstrap-power-select";
<template>
<BsForm @model={{yourModel}} as |form|>
<form.element
@controlComponent={{PowerSelectControl}}
@property="foo"
@label="Choose"
@options={{options}}
@optionsLabelPath="title"
as |el|
>
<el.control @multiple={{true}} />
</form.element>
</BsForm>
</template>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:
import { PowerSelectControl } from "ember-bootstrap-power-select";
<template>
<BsForm @model={{yourModel}} as |form|>
<form.element
@controlComponent={{PowerSelectControl}}
@property="foo"
@label="Choose"
@options={{options}}
as |el|
>
<el.control @searchEnabled={{true}} @searchPlaceholder="Type your name" />
</form.element>
</BsForm>
</template>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.