PowerSelect is a popular Ember add-on aiming to overcome some limitations of the <select> tag. We only provide style overrides for this add-on to keep it in line with other form components.
These style overrides assume the PowerSelect component is set up in your project using the default theme.
To use this component in your application, follow the getting started guide on the add-on website, then add the PowerSelect overrides.
Import the overrides
If you’re already using design-system-components, import the overrides:
/**
* Copyright IBM Corp. 2021, 2026
* SPDX-License-Identifier: MPL-2.0
*/
@import "@hashicorp/design-system-components";
@import "@hashicorp/design-system-power-select-overrides";If you’re not using design-system-components but need to use these custom PowerSelect styles, add design-system-tokens to your project.
/**
* Copyright IBM Corp. 2021, 2026
* SPDX-License-Identifier: MPL-2.0
*/
// for product applications
@import "~@hashicorp/design-system-tokens/dist/products/css/tokens.css";
// for hashicorp developer platform
@import "~@hashicorp/design-system-tokens/dist/devdot/css/tokens.css";How to use these overrides
These overrides rely on specificity, so to apply them, wrap each PowerSelect instance in an element with the hds-power-select class applied to it.
Invocation of the component with overrides would look like this:
<div class="hds-power-select">
<PowerSelect
@options={{this.OPTIONS}}
@selected={{this.SELECTED}}
@onChange={{this.noop}}
@renderInPlace={{true}}
@ariaLabel="Server location"
as |option|
>
{{option}}
</PowerSelect>
</div>Search enabled
When used with the @searchEnabled argument, the input is automatically styled to resemble the Form::TextInput component.
<div class="hds-power-select">
<PowerSelect
@options={{this.OPTIONS}}
@selected={{this.SELECTED}}
@onChange={{this.noop}}
@renderInPlace={{true}}
@searchEnabled={{true}}
@ariaLabel="Server location"
as |option|
>
{{option}}
</PowerSelect>
</div>@afterOptionsComponent block
Use the hds-power-select__after-options class on the outermost element of the “after-options” component to consistently style @afterOptionsComponent.
<div class="hds-power-select">
<PowerSelect
@options={{this.OPTIONS}}
@selected={{this.SELECTED}}
@afterOptionsComponent={{"power-select/after-options"}}
@onChange={{this.noop}}
@renderInPlace={{true}}
@ariaLabel="Server location"
as |option|
>
{{option}}
</PowerSelect>
</div>power-select/after-options.hbs would look like this:
<div class="hds-power-select__after-options">
5 results
</div>Multiple selection
The selected items are automatically styled to resemble the Tag component when multiple options are allowed.
<div class="hds-power-select">
<PowerSelect
@multiple={{true}}
@options={{this.OPTIONS}}
@selected={{this.SELECTEDMULTIPLE}}
@onChange={{this.noop}}
@renderInPlace={{true}}
@ariaLabel="Server location"
as |option|
>
{{option}}
</PowerSelect>
</div>Conformance rating
This addon does not provide a WCAG-conformant component by default; users should carefully consider their options before use.
4.3.0
In this version we have released the SuperSelect component, as replacement for the PowerSelect Ember addon component. For this reason we now consider the PowerSelect style overrides as deprecated and will be removed in a future major release.
How to migrate
We now recommend migrating the existing PowerSelect instances to the SuperSelect component, which being built on top of PowerSelect, provides the same Component API but with much better accessibility.