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.

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