dropdown

The dropdown element can be used for prespecified input. It features an optional label.

The isDynamicWidth variant changes the width of the input field to the width of the longest option.

In order for the label to work correctly, the input tag needs a unique id attribute and the label tag needs the same for attribute.
According to the Web Content Accessibility Guidelines (WCAG), it is highly reccomended to use a label together with the dropdown.
table of content

component variations

Standard dropdown

Open on blank page
<div class="a-dropdown">
  <select id="1" aria-label="here goes the aria label for the dropwdown">
    <option value='"value1"'>Option 1</option>
    <option value='"value2"'>Option 2</option>
    <option value='"value3"'>Option 3</option>
  </select>
</div>

Standard dropdown disabled

Open on blank page
<div class="a-dropdown a-dropdown--disabled">
  <select
    id="2"
    disabled=""
    aria-label="here goes the aria label for the dropwdown"
  >
    <option value='"value1"'>Option 1</option>
    <option value='"value2"'>Option 2</option>
    <option value='"value3"'>Option 3</option>
  </select>
</div>

Standard dropdown label

Open on blank page
<div class="a-dropdown">
  <label for="3">Label</label>
  <select id="3" aria-label="here goes the aria label for the dropwdown">
    <option value='"value1"'>Option 1</option>
    <option value='"value2"'>Option 2</option>
    <option value='"value3"'>Option 3</option>
  </select>
</div>

Standard dropdown label disabled

Open on blank page
<div class="a-dropdown a-dropdown--disabled">
  <label for="4">Label</label>
  <select
    id="4"
    disabled=""
    aria-label="here goes the aria label for the dropwdown"
  >
    <option value='"value1"'>Option 1</option>
    <option value='"value2"'>Option 2</option>
    <option value='"value3"'>Option 3</option>
  </select>
</div>

Standard dropdown dynamic width

Open on blank page
<div class="a-dropdown a-dropdown--dynamic-width">
  <select id="5" aria-label="here goes the aria label for the dropwdown">
    <option value='"value1"'>Option 1 is a very very long option</option>
    <option value='"value2"'>Option 2</option>
    <option value='"value3"'>Option 3</option>
  </select>
</div>

Standard dropdown label dynamic width

Open on blank page
<div class="a-dropdown a-dropdown--dynamic-width">
  <label for="6">Label</label>
  <select id="6" aria-label="here goes the aria label for the dropwdown">
    <option value='"value1"'>Option 1 is a very very long option</option>
    <option value='"value2"'>Option 2</option>
    <option value='"value3"'>Option 3</option>
  </select>
</div>

additional content

styles SCSS

@use "../../styles/helpers.scss";

/* stylelint-disable no-descending-specificity */
.a-dropdown {
  position: relative;
  height: 3rem;
  width: auto;

  select {
    background-color: var(--nested-minor__enabled__default__fill, var(--base-minor__enabled__default__fill));
    color: var(--nested-minor__enabled__default__front, var(--base-minor__enabled__default__front));
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    height: 3rem;
    padding: 0 2.75rem 0 1rem;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:hover {
      background-color: var(--nested-minor__enabled__hovered__fill, var(--base-minor__enabled__hovered__fill));
    }

    &:active {
      background-color: var(--nested-minor__enabled__pressed__fill, var(--base-minor__enabled__pressed__fill));
      outline: none;
    }

    &:focus-visible {
      border: 3px solid var(--nested-pure__enabled__default__front, var(--plain-pure__enabled__default__front));
      outline: 3px solid var(--background);
      outline-offset: -6px;
      padding-inline-start: 13px;
      padding-inline-end: 41px;
    }
  }

  &::after {
    @include helpers.uiIconForComponents();

    position: absolute;
    content: var(--ui-ic-arrow-up-down);
    top: 0.75rem;
    right: 0.7rem;
    pointer-events: none;
  }

  option {
    background-color: var(--nested-pure__enabled__default__fill, var(--plain-pure__enabled__default__fill));
  }

  label {
    color: var(--nested-minor__enabled__default__front, var(--base-minor__enabled__default__front));
    position: absolute;
    margin: 0.25rem 1rem auto 1rem;
    font-size: 0.75rem;
    max-width: calc(100% - 3.5rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    + select {
      padding-top: 1.125rem;
      padding-bottom: 0.3125rem;
    }
  }

  &--dynamic-width {
    display: inline-block;
    margin-right: 2.5rem;
  }

  &--dynamic-width select {
    width: calc(100% + 2rem);
  }

  &--dynamic-width::after {
    right: -1.125rem;
  }

  &--disabled {
    label {
      color: var(--nested-minor__disabled__default__front, var(--base-minor__disabled__default__front));
    }

    select {
      pointer-events: none;
      color: var(--nested-minor__disabled__default__front, var(--base-minor__disabled__default__front));
    }

    &::after {
      color: var(--nested-minor__disabled__default__front, var(--base-minor__disabled__default__front));
    }
  }
}