ember-power-select

Ember Power Select is a select component written in Ember with a focus in flexibility and extensibility.

It is designed to work well with the way we build Ember apps, so it plays nicely with promises, ember-concurrency's tasks, ember-data collections and follows idiomatic patterns.

Features

• 🖊 TypeScript support – ships with type definitions for smooth TypeScript integration.
• ✨ Glint support – template type-checking out of the box for safer templates.
• 🚀 FastBoot compatible – works in server-rendered Ember apps.
• 🕶 Shadow DOM support – can be rendered inside shadow roots without breaking positioning or events.
• 🛠 Addon v2 ready – modern Ember Addon v2 format.
• 🔧 Flexible API – fully customizable; you control the markup and styling.
• ♿ Accessible by default – full keyboard navigation, ARIA attributes, and focus management built-in.

Selection & Search

• 🧩 Single & multiple selection – built-in support for both modes.
• 🔎 Built-in search field – optional search input for filtering options.
• 📍 Flexible search placement – render the search field inside the trigger or inside the dropdown list.
• 📝 Rich content rendering – render HTML or custom components inside options and triggers.
• 🔍 Smart filtering – diacritic-insensitive search with accent sanitization.
• 🧠 Custom matchers – plug in your own matching and scoring logic.
• ⚡ Asynchronous search – remote and delayed searching with debounce support.
• ⏳ Promise-aware – works with promises and async data.
• 🔄 ember-concurrency friendly – works seamlessly with task cancellation.

UX & Customization

• 🧺 Grouping & placeholders – grouped options (no nesting limit) and customizable placeholders.
• ❌ Clearable selections – easily reset or clear selected values.
• 🚫 Disabled states – disable the whole component or individual options.
• 🎨 Theming support – easy CSS-based theming and design customization.
• 🎞 CSS animations & transitions – smooth opening/closing and state-change animations.
• 🧩 Fully composable – replace any internal part with your own components or completely custom UI.

Compatibility

• Ember.js v3.28 or above
• Ember CLI v3.28 or above

Installation

pnpm install ember-power-select

For more installation details see documentation

Usage

Check the full documentation with live examples at www.ember-power-select.com and please open an issue if something doesn't work or is not clear enough.

Extensions

Ember-power-select's focus on flexibility enables the community to build richer and more tailor made components on top of it, focused in solving one particular problem, using composition.

Browser support

This addon was tested in modern browsers and there is no technical reason it wouldn't work. If you find a problem please file an issue.

Testing

In testing it requires ember-cli-qunit. This component also provides some convenient test helpers to interact with the component in acceptance tests.

Contributing

Any contribution is welcome. Please read our guidelines. However, if your contribution involves adding a new feature, please open an issue before to share your plan and agree the details of the feature before starting implementing it.

Troubleshooting

If something doesn't work visit the Troubleshooting section of the docs first and if your problem persist open an issue, specify the version of the component, Ember and browser.