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.