PowerSelect

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:

@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.

// 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">
  <PowerSelectMultiple
    @options={{this.OPTIONS}}
    @selected={{this.SELECTEDMULTIPLE}}
    @onChange={{this.noop}}
    @renderInPlace={{true}}
    @ariaLabel="Server location"
    as |option|
  >
    {{option}}
  </PowerSelectMultiple>
</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

Deprecated

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.