input-select-styles.md

Select Lists

A Select List allows the user to select a single option out of a relatively large number of items, or to reduce the visual prominence of an option selection.

<script type="module">
  import { html, LitElement } from 'lit';
  import { selectStyles } from '@brightspace-ui/core/components/inputs/input-select-styles.js';

  class MySelectElem extends LitElement {

    static get styles() {
      return selectStyles;
    }
    render() {
      return html`
        <select class="d2l-input-select" aria-label="Options">
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
        `;
    }

  }
  customElements.define('d2l-my-select-elem', MySelectElem);
</script>
<d2l-my-select-elem></d2l-my-select-elem>

Best Practices

• Use to allow the user to select a single option from a relatively large list of options
• Use to save space / reduce the visual prominence of an exclusive selection option (instead of a choice from 8 radio inputs)
• Use a Select List to tuck away non-critical options, or options where the default selection is likely to be the most desirable

• Don't use if your options are more than 1-2 words. The cognitive load of comparing options in a Select List is relatively high.
• Select Lists show the available options offscreen – be careful if the selections you are asking the user to make are on the critical path – see Dropdowns should be the UI of last resort and be careful about your selection
• Select Lists are form controls, and should not submit data or execute an action without an explicit submit action. Toggling progressive disclosure is OK.
• Don't use prompt text in place of a Select List field label – it’s harder to scan and negatively impacts accessibility
• Don't use for numeric input – a <d2l-input-number> or a date input is much easier to use

Applying styles to native select elements

Native <select> elements can be styled by importing input-select-styles.js into your Lit element and applying the d2l-input-select CSS class.

The styles support the pseudo-classes disabled, focus, and hover, as well as the aria-invalid attribute.

When applying styles to the native element, we also recommend using the SkeletonMixin to help convey to users that the page, or at least a section of it, has not finished loading yet.

<script type="module">
  import { html, LitElement } from 'lit';
  import { selectStyles } from '@brightspace-ui/core/components/inputs/input-select-styles.js';
  import { SkeletonMixin } from '@brightspace-ui/core/components/skeleton/skeleton-mixin.js';

  class TestInputSelect extends SkeletonMixin(LitElement) {
  static get styles() {
    return [super.styles, selectStyles];
  }

  render() {
    return html`
      <div class="d2l-skeletize">
        <select
          aria-label="Dinosaur"
          class="d2l-input-select">
          <option>Tyrannosaurus</option>
          <option>Velociraptor</option>
          <option>Deinonychus</option>
        </select>
      </div>
    `;
  }

  }
  customElements.define('d2l-test-input-select', TestInputSelect);
</script>
<d2l-test-input-select></d2l-test-input-select>

Labelling

The aria-label attribute can be used in places where a non-visible label is desired.

For a visible label, import the label styles and include them in your component's styles. Wrap the <select> in a <label> element and apply the styles by adding the d2l-input-label CSS class to a nested <span> element:

<script type="module">
  import { html, LitElement } from 'lit';
  import { selectStyles } from '@brightspace-ui/core/components/inputs/input-select-styles.js';
  import { inputLabelStyles } from '@brightspace-ui/core/components/inputs/input-label-styles.js';

  class TestInputSelect extends LitElement {

    static get styles() {
      return [inputLabelStyles, selectStyles];
    }

    render() {
      return html`
        <label>
          <span class="d2l-input-label">Dinosaur</span>
          <select class="d2l-input-select">
            <option>Tyrannosaurus</option>
            <option>Velociraptor</option>
            <option>Deinonychus</option>
          </select>
        </label>
      `;
    }

  }
  customElements.define('d2l-test-input-select', TestInputSelect);
</script>
<d2l-test-input-select></d2l-test-input-select>

Accessibility

• Due to applying styles based on a CSS class rather than being its own component, the accessibility provided by selectStyles comes purely in the way of following the guidelines for contrast and focus
• There are several things that can be done to make sure your select component is accessible, including:
  • Following the W3C Combobox pattern
  • Using either the aria-label attribute, a wrapper <label> element or <label> with aria-labelledby to appropriately assign a label to your component
  • Using label for optgroup if you choose to use that element within the select element, so that it can be read out to screenreaders