The trigger

The trigger

The trigger is the only part of the select that is always visible and the area that will get more interaction from the user so it's not a surprise that it can be customized in many ways.

Disable the component

You can completely disable the trigger (and therefore the entire component) by passing disabled=true.

Pluto

The selected option

As we saw in the How to use it section, Ember Power Select will reuse the same block used for each element of the list for the content of the trigger, both in normal and multiple mode, but this is something you can also customize if you need to.

Since we have run out of block to pass the the component we need to use other components if we want to go any further. Pass selectedItemComponent="component-name" to the component.

Within that component you have access to an option property that contains the selected option. In multiple selects the selectedItemComponent component is rendered as once per each selected option.

Set a placeholder

If you pass placeholder="Some text" to the component that message will be displayed in the trigger when no value has been selected.

Please, select one destination
Take into account that in the multiple selects with search enabled, the trigger contains a searchbox and you should use the searchPlaceholder option instead. Check The search section for more info.

Set a complex placeholder

Sometimes a simple string as placeholder is not enough and you want bold text, icons and such. In that case you can pass a placeholderComponent, on which you can do pretty much anything.

<strong>Fill</strong> <em>this</em> <small>select</small> and <span class="text-pink">praise</span>
<img src="/grumpy-cat-5b86cf02061cc6f8018292193bcf0880.png" alt="grumpy-cat" width="24" height="24">
Fill this select and praise grumpy-cat

You can pass both placeholderComponent and placeholder. Inside your component the placeholder text will be available.

Clear button

Sometimes you want to allow the users to clear the selection they just made. Regular selects don't allow that, but here is very simple, just pass allowClear=true. Please note that this option has no effect in {{power-select-multiple}}

Pluto ×

When the user clicks in the trigger the dropdown with the options appears. It's the most complex part of the component and the subject of the next chapter.