Dropdown

The dropdown component provides a flexible and accessible way to present a list of options to users. It supports various styles, states, and even includes a search functionality.

Basic Usage

To use the basic dropdown, simply include the following HTML structure:

<div class="skin-form dropdown-wrapper group">
  <label
    for="basic-dropdown-trigger"
    id="basic-dropdown-label"
    class="dropdown-label text-body font-semi-bold"
    >Label</label
  >
  <div class="dropdown">
    <div
      role="combobox"
      aria-expanded="false"
      aria-owns="basic-dropdown-list"
      aria-controls="basic-dropdown-list"
      aria-labelledby="basic-dropdown-label"
    >
      <button
        id="basic-dropdown-trigger "
        class="dropdown-summary interactive"
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-controls="basic-dropdown-list"
        aria-labelledby="basic-dropdown-label"
      >
        <div class="dropdown-summary-content">
          <svg
            class="dropdown-icon"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
              clip-rule="evenodd"
            />
          </svg>
          <span id="selected-value" class="text-body">Placeholder Text</span>
          <svg
            class="dropdown-icon chevron"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
      </button>
    </div>
    <div class="dropdown-content-wrapper">
      <ul
        id="basic-dropdown-list"
        class="dropdown-list"
        role="listbox"
        aria-labelledby="basic-dropdown-label"
        tabindex="-1"
      >
        <li
          role="option"
          id="basic-option-1"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 1
        </li>
        <li
          role="option"
          id="basic-option-2"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 2
        </li>
        <li
          role="option"
          id="basic-option-3"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 3
        </li>
        <li
          role="option"
          id="basic-option-4"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 4
        </li>
        <li
          role="option"
          id="basic-option-5"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 5
        </li>
        <li
          role="option"
          id="basic-option-6"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 6
        </li>
        <li
          role="option"
          id="basic-option-7"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 7
        </li>
        <li
          role="option"
          id="basic-option-8"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 8
        </li>
      </ul>
    </div>
  </div>
  <div class="dropdown-helper-wrapper">
    <p class="dropdown-helper text-sm soft" id="basic-helper">Helper text</p>
    <div class="skin-error dropdown-error-content">
      <svg
        class="dropdown-icon"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
        focusable="false"
      >
        <path
          fill-rule="evenodd"
          d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
          clip-rule="evenodd"
        />
      </svg>
      <p class="text-sm font-medium" id="error-dropdown-message" role="alert">
        Error Message
      </p>
    </div>
  </div>
</div>
<div class="skin-form dropdown-wrapper group">
  <label
    for="basic-dropdown-trigger"
    id="basic-dropdown-label"
    class="dropdown-label text-body font-semi-bold"
    >Label</label
  >
  <div class="dropdown">
    <div
      role="combobox"
      aria-expanded="false"
      aria-owns="basic-dropdown-list"
      aria-controls="basic-dropdown-list"
      aria-labelledby="basic-dropdown-label"
    >
      <button
        id="basic-dropdown-trigger "
        class="dropdown-summary interactive"
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-controls="basic-dropdown-list"
        aria-labelledby="basic-dropdown-label"
      >
        <div class="dropdown-summary-content">
          <svg
            class="dropdown-icon"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
              clip-rule="evenodd"
            />
          </svg>
          <span id="selected-value" class="text-body">Placeholder Text</span>
          <svg
            class="dropdown-icon chevron"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
      </button>
    </div>
    <div class="dropdown-content-wrapper">
      <ul
        id="basic-dropdown-list"
        class="dropdown-list"
        role="listbox"
        aria-labelledby="basic-dropdown-label"
        tabindex="-1"
      >
        <li
          role="option"
          id="basic-option-1"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 1
        </li>
        <li
          role="option"
          id="basic-option-2"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 2
        </li>
        <li
          role="option"
          id="basic-option-3"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 3
        </li>
        <li
          role="option"
          id="basic-option-4"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 4
        </li>
        <li
          role="option"
          id="basic-option-5"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 5
        </li>
        <li
          role="option"
          id="basic-option-6"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 6
        </li>
        <li
          role="option"
          id="basic-option-7"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 7
        </li>
        <li
          role="option"
          id="basic-option-8"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 8
        </li>
      </ul>
    </div>
  </div>
  <div class="dropdown-helper-wrapper">
    <p class="dropdown-helper text-sm soft" id="basic-helper">Helper text</p>
    <div class="skin-error dropdown-error-content">
      <svg
        class="dropdown-icon"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
        focusable="false"
      >
        <path
          fill-rule="evenodd"
          d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
          clip-rule="evenodd"
        />
      </svg>
      <p class="text-sm font-medium" id="error-dropdown-message" role="alert">
        Error Message
      </p>
    </div>
  </div>
</div>

The open state of the search dropdown can be triggered by adding the dropdown-open to the main wrapper.

<div class="skin-form dropdown-wrapper wrapper group dropdown-open">
  <label
    for="basic-dropdown-open-trigger"
    id="basic-dropdown-open-label"
    class="dropdown-label text-body font-semi-bold"
    >Label</label
  >
  <div class="dropdown">
    <div
      role="combobox"
      aria-expanded="false"
      aria-owns="basic-dropdown-open-list"
      aria-controls="basic-dropdown-open-list"
      aria-labelledby="basic-dropdown-open-label"
    >
      <button
        id="basic-dropdown-open-trigger "
        class="dropdown-summary interactive"
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-controls="basic-dropdown-open-list"
        aria-labelledby="basic-dropdown-open-label"
      >
        <div class="dropdown-summary-content">
          <svg
            class="dropdown-icon"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
              clip-rule="evenodd"
            />
          </svg>
          <span id="selected-value" class="text-body">Placeholder Text</span>
          <svg
            class="dropdown-icon chevron"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
      </button>
    </div>
    <div class="dropdown-content-wrapper">
      <ul
        id="basic-dropdown-open-list"
        class="dropdown-list"
        role="listbox"
        aria-labelledby="basic-dropdown-open-label"
        tabindex="-1"
      >
        <li
          role="option"
          id="basic-option-1"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 1
        </li>
        <li
          role="option"
          id="basic-option-2"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 2
        </li>
        <li
          role="option"
          id="basic-option-3"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 3
        </li>
        <li
          role="option"
          id="basic-option-4"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 4
        </li>
        <li
          role="option"
          id="basic-option-5"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 5
        </li>
        <li
          role="option"
          id="basic-option-6"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 6
        </li>
        <li
          role="option"
          id="basic-option-7"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 7
        </li>
        <li
          role="option"
          id="basic-option-8"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 8
        </li>
      </ul>
    </div>
  </div>
  <div class="dropdown-helper-wrapper">
    <p class="dropdown-helper text-sm soft" id="basic-open-helper">
      Helper text
    </p>
    <div class="skin-error dropdown-error-content">
      <svg
        class="dropdown-icon"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
        focusable="false"
      >
        <path
          fill-rule="evenodd"
          d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
          clip-rule="evenodd"
        />
      </svg>
      <p class="text-sm font-medium" id="error-dropdown-message" role="alert">
        Error Message
      </p>
    </div>
  </div>
</div>
<div class="skin-form dropdown-wrapper wrapper group dropdown-open">
  <label
    for="basic-dropdown-open-trigger"
    id="basic-dropdown-open-label"
    class="dropdown-label text-body font-semi-bold"
    >Label</label
  >
  <div class="dropdown">
    <div
      role="combobox"
      aria-expanded="false"
      aria-owns="basic-dropdown-open-list"
      aria-controls="basic-dropdown-open-list"
      aria-labelledby="basic-dropdown-open-label"
    >
      <button
        id="basic-dropdown-open-trigger "
        class="dropdown-summary interactive"
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-controls="basic-dropdown-open-list"
        aria-labelledby="basic-dropdown-open-label"
      >
        <div class="dropdown-summary-content">
          <svg
            class="dropdown-icon"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
              clip-rule="evenodd"
            />
          </svg>
          <span id="selected-value" class="text-body">Placeholder Text</span>
          <svg
            class="dropdown-icon chevron"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
      </button>
    </div>
    <div class="dropdown-content-wrapper">
      <ul
        id="basic-dropdown-open-list"
        class="dropdown-list"
        role="listbox"
        aria-labelledby="basic-dropdown-open-label"
        tabindex="-1"
      >
        <li
          role="option"
          id="basic-option-1"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 1
        </li>
        <li
          role="option"
          id="basic-option-2"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 2
        </li>
        <li
          role="option"
          id="basic-option-3"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 3
        </li>
        <li
          role="option"
          id="basic-option-4"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 4
        </li>
        <li
          role="option"
          id="basic-option-5"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 5
        </li>
        <li
          role="option"
          id="basic-option-6"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 6
        </li>
        <li
          role="option"
          id="basic-option-7"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 7
        </li>
        <li
          role="option"
          id="basic-option-8"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 8
        </li>
      </ul>
    </div>
  </div>
  <div class="dropdown-helper-wrapper">
    <p class="dropdown-helper text-sm soft" id="basic-open-helper">
      Helper text
    </p>
    <div class="skin-error dropdown-error-content">
      <svg
        class="dropdown-icon"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
        focusable="false"
      >
        <path
          fill-rule="evenodd"
          d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
          clip-rule="evenodd"
        />
      </svg>
      <p class="text-sm font-medium" id="error-dropdown-message" role="alert">
        Error Message
      </p>
    </div>
  </div>
</div>

Adding Search Functionality

To add search functionality to your dropdown, use the search dropdown variant:

<div class="skin-form dropdown-wrapper wrapper group">
  <label
    for="search-dropdown-trigger"
    id="search-dropdown-label"
    class="dropdown-label text-body font-semi-bold"
    >Label</label
  >
  <div class="dropdown">
    <div
      class="wrapper"
      role="combobox"
      aria-expanded="false"
      aria-owns="search-dropdown-list"
      aria-controls="search-dropdown-list"
      aria-labelledby="search-dropdown-label"
    >
      <button
        id="search-dropdown-trigger "
        class="dropdown-summary interactive"
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-controls="search-dropdown-list"
        aria-labelledby="search-dropdown-label"
      >
        <div class="dropdown-summary-content">
          <svg
            class="dropdown-icon"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
              clip-rule="evenodd"
            />
          </svg>
          <span id="selected-value" class="text-body">Placeholder Text</span>
          <svg
            class="dropdown-icon chevron"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
      </button>
    </div>
    <div class="dropdown-content-wrapper">
      <div class="dropdown-search-wrapper wrapper interactive">
        <label for="dropdown-search" class="sr-only">Search options</label>
        <div class="search-input-wrapper">
          <svg
            class="search-icon"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
              clip-rule="evenodd"
            />
          </svg>
          <input
            type="search"
            id="dropdown-search"
            class="dropdown-search-input text-body placeholder:soft"
            placeholder="Search..."
            aria-controls="search-dropdown-list"
            aria-autocomplete="list"
            autocomplete="off"
          />
        </div>
      </div>
      <ul
        id="search-dropdown-list"
        class="dropdown-list"
        role="listbox"
        aria-labelledby="search-dropdown-label"
        tabindex="-1"
      >
        <li
          role="option"
          id="search-option-1"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 1
        </li>
        <li
          role="option"
          id="search-option-2"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 2
        </li>
        <li
          role="option"
          id="search-option-3"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 3
        </li>
        <li
          role="option"
          id="search-option-4"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 4
        </li>
        <li
          role="option"
          id="search-option-5"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 5
        </li>
        <li
          role="option"
          id="search-option-6"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 6
        </li>
        <li
          role="option"
          id="search-option-7"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 7
        </li>
        <li
          role="option"
          id="search-option-8"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 8
        </li>
      </ul>
    </div>
    <div class="dropdown-helper-wrapper">
      <p class="dropdown-helper text-sm soft" id="basic-helper">Helper text</p>
      <div class="skin-error dropdown-error-content">
        <svg
          class="dropdown-icon"
          viewBox="0 0 20 20"
          fill="currentColor"
          aria-hidden="true"
          focusable="false"
        >
          <path
            fill-rule="evenodd"
            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
            clip-rule="evenodd"
          />
        </svg>
        <p class="text-sm font-medium" id="error-dropdown-message" role="alert">
          Error Message
        </p>
      </div>
    </div>
  </div>
</div>
<div class="skin-form dropdown-wrapper wrapper group">
  <label
    for="search-dropdown-trigger"
    id="search-dropdown-label"
    class="dropdown-label text-body font-semi-bold"
    >Label</label
  >
  <div class="dropdown">
    <div
      class="wrapper"
      role="combobox"
      aria-expanded="false"
      aria-owns="search-dropdown-list"
      aria-controls="search-dropdown-list"
      aria-labelledby="search-dropdown-label"
    >
      <button
        id="search-dropdown-trigger "
        class="dropdown-summary interactive"
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-controls="search-dropdown-list"
        aria-labelledby="search-dropdown-label"
      >
        <div class="dropdown-summary-content">
          <svg
            class="dropdown-icon"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
              clip-rule="evenodd"
            />
          </svg>
          <span id="selected-value" class="text-body">Placeholder Text</span>
          <svg
            class="dropdown-icon chevron"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
      </button>
    </div>
    <div class="dropdown-content-wrapper">
      <div class="dropdown-search-wrapper wrapper interactive">
        <label for="dropdown-search" class="sr-only">Search options</label>
        <div class="search-input-wrapper">
          <svg
            class="search-icon"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
              clip-rule="evenodd"
            />
          </svg>
          <input
            type="search"
            id="dropdown-search"
            class="dropdown-search-input text-body placeholder:soft"
            placeholder="Search..."
            aria-controls="search-dropdown-list"
            aria-autocomplete="list"
            autocomplete="off"
          />
        </div>
      </div>
      <ul
        id="search-dropdown-list"
        class="dropdown-list"
        role="listbox"
        aria-labelledby="search-dropdown-label"
        tabindex="-1"
      >
        <li
          role="option"
          id="search-option-1"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 1
        </li>
        <li
          role="option"
          id="search-option-2"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 2
        </li>
        <li
          role="option"
          id="search-option-3"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 3
        </li>
        <li
          role="option"
          id="search-option-4"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 4
        </li>
        <li
          role="option"
          id="search-option-5"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 5
        </li>
        <li
          role="option"
          id="search-option-6"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 6
        </li>
        <li
          role="option"
          id="search-option-7"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 7
        </li>
        <li
          role="option"
          id="search-option-8"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 8
        </li>
      </ul>
    </div>
    <div class="dropdown-helper-wrapper">
      <p class="dropdown-helper text-sm soft" id="basic-helper">Helper text</p>
      <div class="skin-error dropdown-error-content">
        <svg
          class="dropdown-icon"
          viewBox="0 0 20 20"
          fill="currentColor"
          aria-hidden="true"
          focusable="false"
        >
          <path
            fill-rule="evenodd"
            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
            clip-rule="evenodd"
          />
        </svg>
        <p class="text-sm font-medium" id="error-dropdown-message" role="alert">
          Error Message
        </p>
      </div>
    </div>
  </div>
</div>

The open variant is applied in the same way as before, by adding the dropdown-open class to the main wrapper.

<div class="skin-form dropdown-wrapper group wrapper dropdown-open">
  <label
    for="search-open-dropdown-trigger"
    id="search-open-dropdown-label"
    class="dropdown-label text-body font-semi-bold"
    >Label</label
  >
  <div class="dropdown">
    <div
      class="wrapper"
      role="combobox"
      aria-expanded="false"
      aria-owns="search-open-dropdown-list"
      aria-controls="search-open-dropdown-list"
      aria-labelledby="search-open-dropdown-label"
    >
      <button
        id="search-open-dropdown-trigger "
        class="dropdown-summary interactive"
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-controls="search-open-dropdown-list"
        aria-labelledby="search-open-dropdown-label"
      >
        <div class="dropdown-summary-content">
          <svg
            class="dropdown-icon"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
              clip-rule="evenodd"
            />
          </svg>
          <span id="selected-value" class="text-body">Placeholder Text</span>
          <svg
            class="dropdown-icon chevron"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
      </button>
    </div>
    <div class="dropdown-content-wrapper">
      <div class="dropdown-search-wrapper wrapper">
        <label for="dropdown-search-open-open" class="sr-only">
          Search options
        </label>
        <div class="search-input-wrapper">
          <svg
            class="dropdown-search-icon"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
              clip-rule="evenodd"
            />
          </svg>
          <input
            type="search"
            id="dropdown-search-input"
            class="dropdown-search-input text-body placeholder:soft"
            placeholder="Search..."
            aria-controls="search-open-dropdown-list"
            aria-autocomplete="list"
            autocomplete="off"
          />
        </div>
      </div>
      <ul
        id="search-open-dropdown-list"
        class="dropdown-list"
        role="listbox"
        aria-labelledby="search-open-dropdown-label"
        tabindex="-1"
      >
        <li
          role="option"
          id="search-open-option-1"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 1
        </li>
        <li
          role="option"
          id="search-open-option-2"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 2
        </li>
        <li
          role="option"
          id="search-open-option-3"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 3
        </li>
        <li
          role="option"
          id="search-open-option-4"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 4
        </li>
        <li
          role="option"
          id="search-open-option-5"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 5
        </li>
        <li
          role="option"
          id="search-open-option-6"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 6
        </li>
        <li
          role="option"
          id="search-open-option-7"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 7
        </li>
        <li
          role="option"
          id="search-open-option-8"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 8
        </li>
      </ul>
    </div>
  </div>
  <div class="dropdown-helper-wrapper">
    <p class="dropdown-helper text-sm soft" id="search-open-helper">
      Helper text
    </p>
    <div class="skin-error dropdown-error-content">
      <svg
        class="dropdown-icon"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
        focusable="false"
      >
        <path
          fill-rule="evenodd"
          d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
          clip-rule="evenodd"
        />
      </svg>
      <p class="text-sm font-medium" id="error-dropdown-message" role="alert">
        Error Message
      </p>
    </div>
  </div>
</div>
<div class="skin-form dropdown-wrapper group wrapper dropdown-open">
  <label
    for="search-open-dropdown-trigger"
    id="search-open-dropdown-label"
    class="dropdown-label text-body font-semi-bold"
    >Label</label
  >
  <div class="dropdown">
    <div
      class="wrapper"
      role="combobox"
      aria-expanded="false"
      aria-owns="search-open-dropdown-list"
      aria-controls="search-open-dropdown-list"
      aria-labelledby="search-open-dropdown-label"
    >
      <button
        id="search-open-dropdown-trigger "
        class="dropdown-summary interactive"
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-controls="search-open-dropdown-list"
        aria-labelledby="search-open-dropdown-label"
      >
        <div class="dropdown-summary-content">
          <svg
            class="dropdown-icon"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
              clip-rule="evenodd"
            />
          </svg>
          <span id="selected-value" class="text-body">Placeholder Text</span>
          <svg
            class="dropdown-icon chevron"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
      </button>
    </div>
    <div class="dropdown-content-wrapper">
      <div class="dropdown-search-wrapper wrapper">
        <label for="dropdown-search-open-open" class="sr-only">
          Search options
        </label>
        <div class="search-input-wrapper">
          <svg
            class="dropdown-search-icon"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
              clip-rule="evenodd"
            />
          </svg>
          <input
            type="search"
            id="dropdown-search-input"
            class="dropdown-search-input text-body placeholder:soft"
            placeholder="Search..."
            aria-controls="search-open-dropdown-list"
            aria-autocomplete="list"
            autocomplete="off"
          />
        </div>
      </div>
      <ul
        id="search-open-dropdown-list"
        class="dropdown-list"
        role="listbox"
        aria-labelledby="search-open-dropdown-label"
        tabindex="-1"
      >
        <li
          role="option"
          id="search-open-option-1"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 1
        </li>
        <li
          role="option"
          id="search-open-option-2"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 2
        </li>
        <li
          role="option"
          id="search-open-option-3"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 3
        </li>
        <li
          role="option"
          id="search-open-option-4"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 4
        </li>
        <li
          role="option"
          id="search-open-option-5"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 5
        </li>
        <li
          role="option"
          id="search-open-option-6"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 6
        </li>
        <li
          role="option"
          id="search-open-option-7"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 7
        </li>
        <li
          role="option"
          id="search-open-option-8"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 8
        </li>
      </ul>
    </div>
  </div>
  <div class="dropdown-helper-wrapper">
    <p class="dropdown-helper text-sm soft" id="search-open-helper">
      Helper text
    </p>
    <div class="skin-error dropdown-error-content">
      <svg
        class="dropdown-icon"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
        focusable="false"
      >
        <path
          fill-rule="evenodd"
          d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
          clip-rule="evenodd"
        />
      </svg>
      <p class="text-sm font-medium" id="error-dropdown-message" role="alert">
        Error Message
      </p>
    </div>
  </div>
</div>

States

Error State

To indicate an error state, add the dropdown-error class to the main wrapper:

<div class="skin-form dropdown-wrapper wrapper dropdown-error group">
  <label
    for="error-dropdown-trigger"
    id="error-dropdown-label"
    class="dropdown-label text-body font-semi-bold"
    >Label</label
  >
  <div class="dropdown">
    <div
      class="wrapper"
      role="combobox"
      aria-expanded="false"
      aria-owns="error-dropdown-list"
      aria-controls="error-dropdown-list"
      aria-labelledby="error-dropdown-label"
    >
      <button
        id="error-dropdown-trigger "
        class="dropdown-summary interactive"
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-controls="error-dropdown-list"
        aria-labelledby="error-dropdown-label"
      >
        <div class="dropdown-summary-content">
          <svg
            class="dropdown-icon"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
              clip-rule="evenodd"
            />
          </svg>
          <span id="selected-value" class="text-body">Placeholder Text</span>
          <svg
            class="dropdown-icon chevron"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
      </button>
    </div>
    <div class="dropdown-content-wrapper">
      <ul
        id="error-dropdown-list"
        class="dropdown-list"
        role="listbox"
        aria-labelledby="error-dropdown-label"
        tabindex="-1"
      >
        <li
          role="option"
          id="basic-option-1"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 1
        </li>
        <li
          role="option"
          id="basic-option-2"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 2
        </li>
        <li
          role="option"
          id="basic-option-3"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 3
        </li>
        <li
          role="option"
          id="basic-option-4"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 4
        </li>
        <li
          role="option"
          id="basic-option-5"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 5
        </li>
        <li
          role="option"
          id="basic-option-6"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 6
        </li>
        <li
          role="option"
          id="basic-option-7"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 7
        </li>
        <li
          role="option"
          id="basic-option-8"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 8
        </li>
      </ul>
    </div>
  </div>
  <div class="dropdown-helper-wrapper">
    <p class="dropdown-helper text-sm soft" id="basic-helper">Helper text</p>
    <div class="skin-error dropdown-error-content">
      <svg
        class="dropdown-icon"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
        focusable="false"
      >
        <path
          fill-rule="evenodd"
          d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
          clip-rule="evenodd"
        />
      </svg>
      <p class="text-sm font-medium" id="error-dropdown-message" role="alert">
        Error Message
      </p>
    </div>
  </div>
</div>
<div class="skin-form dropdown-wrapper wrapper dropdown-error group">
  <label
    for="error-dropdown-trigger"
    id="error-dropdown-label"
    class="dropdown-label text-body font-semi-bold"
    >Label</label
  >
  <div class="dropdown">
    <div
      class="wrapper"
      role="combobox"
      aria-expanded="false"
      aria-owns="error-dropdown-list"
      aria-controls="error-dropdown-list"
      aria-labelledby="error-dropdown-label"
    >
      <button
        id="error-dropdown-trigger "
        class="dropdown-summary interactive"
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-controls="error-dropdown-list"
        aria-labelledby="error-dropdown-label"
      >
        <div class="dropdown-summary-content">
          <svg
            class="dropdown-icon"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
              clip-rule="evenodd"
            />
          </svg>
          <span id="selected-value" class="text-body">Placeholder Text</span>
          <svg
            class="dropdown-icon chevron"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
      </button>
    </div>
    <div class="dropdown-content-wrapper">
      <ul
        id="error-dropdown-list"
        class="dropdown-list"
        role="listbox"
        aria-labelledby="error-dropdown-label"
        tabindex="-1"
      >
        <li
          role="option"
          id="basic-option-1"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 1
        </li>
        <li
          role="option"
          id="basic-option-2"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 2
        </li>
        <li
          role="option"
          id="basic-option-3"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 3
        </li>
        <li
          role="option"
          id="basic-option-4"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 4
        </li>
        <li
          role="option"
          id="basic-option-5"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 5
        </li>
        <li
          role="option"
          id="basic-option-6"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 6
        </li>
        <li
          role="option"
          id="basic-option-7"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 7
        </li>
        <li
          role="option"
          id="basic-option-8"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 8
        </li>
      </ul>
    </div>
  </div>
  <div class="dropdown-helper-wrapper">
    <p class="dropdown-helper text-sm soft" id="basic-helper">Helper text</p>
    <div class="skin-error dropdown-error-content">
      <svg
        class="dropdown-icon"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
        focusable="false"
      >
        <path
          fill-rule="evenodd"
          d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
          clip-rule="evenodd"
        />
      </svg>
      <p class="text-sm font-medium" id="error-dropdown-message" role="alert">
        Error Message
      </p>
    </div>
  </div>
</div>

Inactive State

For an inactive dropdown, add the disabled property to the dropdown-wrapper div. Ensure that the aria labels are also changed to reflect this.

<div class="skin-form dropdown-wrapper wrapper wrapper group">
  <label
    for="inactive-dropdown-trigger"
    id="inactive-dropdown-label"
    class="dropdown-label text-body font-semi-bold"
    >Label</label
  >
  <div class="dropdown">
    <div
      class="wrapper"
      role="combobox"
      aria-expanded="false"
      aria-owns="inactive-dropdown-list"
      aria-controls="inactive-dropdown-list"
      aria-labelledby="inactive-dropdown-label"
    >
      <button
        id="inactive-dropdown-trigger "
        class="dropdown-summary interactive"
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-controls="inactive-dropdown-list"
        aria-labelledby="inactive-dropdown-label"
        disabled
      >
        <div class="dropdown-summary-content">
          <svg
            class="dropdown-icon"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
              clip-rule="evenodd"
            />
          </svg>
          <span id="selected-value" class="text-body">Placeholder Text</span>
          <svg
            class="dropdown-icon chevron"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
      </button>
    </div>
    <div class="dropdown-content-wrapper">
      <ul
        id="inactive-dropdown-list"
        class="dropdown-list"
        role="listbox"
        aria-labelledby="inactive-dropdown-label"
        tabindex="-1"
      >
        <li
          role="option"
          id="basic-option-1"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 1
        </li>
        <li
          role="option"
          id="basic-option-2"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 2
        </li>
        <li
          role="option"
          id="basic-option-3"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 3
        </li>
        <li
          role="option"
          id="basic-option-4"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 4
        </li>
        <li
          role="option"
          id="basic-option-5"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 5
        </li>
        <li
          role="option"
          id="basic-option-6"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 6
        </li>
        <li
          role="option"
          id="basic-option-7"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 7
        </li>
        <li
          role="option"
          id="basic-option-8"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 8
        </li>
      </ul>
    </div>
  </div>
  <div class="dropdown-helper-wrapper">
    <p class="dropdown-helper text-sm soft" id="basic-helper">Helper text</p>
    <div class="skin-error dropdown-error-content">
      <svg
        class="dropdown-icon"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
        focusable="false"
      >
        <path
          fill-rule="evenodd"
          d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
          clip-rule="evenodd"
        />
      </svg>
      <p class="text-sm font-medium" id="error-dropdown-message" role="alert">
        Error Message
      </p>
    </div>
  </div>
</div>
<div class="skin-form dropdown-wrapper wrapper wrapper group">
  <label
    for="inactive-dropdown-trigger"
    id="inactive-dropdown-label"
    class="dropdown-label text-body font-semi-bold"
    >Label</label
  >
  <div class="dropdown">
    <div
      class="wrapper"
      role="combobox"
      aria-expanded="false"
      aria-owns="inactive-dropdown-list"
      aria-controls="inactive-dropdown-list"
      aria-labelledby="inactive-dropdown-label"
    >
      <button
        id="inactive-dropdown-trigger "
        class="dropdown-summary interactive"
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-controls="inactive-dropdown-list"
        aria-labelledby="inactive-dropdown-label"
        disabled
      >
        <div class="dropdown-summary-content">
          <svg
            class="dropdown-icon"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
              clip-rule="evenodd"
            />
          </svg>
          <span id="selected-value" class="text-body">Placeholder Text</span>
          <svg
            class="dropdown-icon chevron"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
      </button>
    </div>
    <div class="dropdown-content-wrapper">
      <ul
        id="inactive-dropdown-list"
        class="dropdown-list"
        role="listbox"
        aria-labelledby="inactive-dropdown-label"
        tabindex="-1"
      >
        <li
          role="option"
          id="basic-option-1"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 1
        </li>
        <li
          role="option"
          id="basic-option-2"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 2
        </li>
        <li
          role="option"
          id="basic-option-3"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 3
        </li>
        <li
          role="option"
          id="basic-option-4"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 4
        </li>
        <li
          role="option"
          id="basic-option-5"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 5
        </li>
        <li
          role="option"
          id="basic-option-6"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 6
        </li>
        <li
          role="option"
          id="basic-option-7"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 7
        </li>
        <li
          role="option"
          id="basic-option-8"
          class="text-body interactive"
          aria-selected="false"
        >
          Item 8
        </li>
      </ul>
    </div>
  </div>
  <div class="dropdown-helper-wrapper">
    <p class="dropdown-helper text-sm soft" id="basic-helper">Helper text</p>
    <div class="skin-error dropdown-error-content">
      <svg
        class="dropdown-icon"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
        focusable="false"
      >
        <path
          fill-rule="evenodd"
          d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
          clip-rule="evenodd"
        />
      </svg>
      <p class="text-sm font-medium" id="error-dropdown-message" role="alert">
        Error Message
      </p>
    </div>
  </div>
</div>

CSS Variables

The dropdown system can be customized using CSS variables:

Layout and Sizing

Variable	Default Value	Description
`--dropdown-width`	`16rem`	Width of the dropdown
`--dropdown-gap`	`0.25rem`	Gap between dropdown elements
`--dropdown-padding-y`	`0.5rem`	Vertical padding of the dropdown
`--dropdown-padding-x`	`1rem`	Horizontal padding of the dropdown
`--dropdown-menu-margin-top`	`0.25rem`	Top margin of the dropdown menu
`--dropdown-max-items`	`5`	Maximum number of visible items
`--dropdown-item-height`	`2.5rem`	Height of each dropdown item

Borders and Styling

Variable	Default Value	Description
`--dropdown-border-width`	`1px`	Default border width
`--dropdown-border-width-active`	`2px`	Border width when active
`--dropdown-radius`	`var(--radius-site)`	Border radius of the dropdown
`--dropdown-error-border-color`	`var(--color-error)`	Border color for error state
`--dropdown-search-divider-width`	`1px`	Width of the divider below the search input

Scrollbar Customization

Variable	Default Value	Description
`--dropdown-scroll-padding`	`0.25em`	Padding around the scrollbar
`--dropdown-scrollbar-radius`	`var(--radius-site)`	Border radius of the scrollbar
`--dropdown-scrollbar-width`	`8px`	Width of the scrollbar

Scrolling Behavior

The dropdown uses a dynamic max-height calculation based on the following formula:

max-height: calc((var(--dropdown-item-height) * var(--dropdown-max-items)));

This ensures consistent height across all dropdown variants. When content exceeds this height, a scrollbar appears automatically. For the search dropdown, the formula is adjusted to account for the search input:

max-height: calc(
  (var(--dropdown-item-height) * var(--dropdown-max-items)) +
    var(--dropdown-search-height)
);

Accessibility

The dropdown components are built with accessibility in mind, using semantic HTML and ARIA attributes to ensure they work well with screen readers and keyboard navigation.

Current Implementation Features

Structure and Labeling

Every dropdown has a proper label that’s connected to the component using aria-labelledby
The dropdown uses a button element for the trigger and a ul element for the list of options
The dropdown wrapper uses the listbox role with appropriate ARIA attributes
Inactive state is managed using the disabled attribute on the dropdown wrapper

Keyboard Support

The current HTML structure supports:

Tab navigation to move focus to the dropdown button
Focus indicators on interactive elements

Each variant includes specific features for screen readers:

Use of label and the for attribute
Options marked with role="option" and aria-selected states
Expanded state indicated with aria-expanded on the button and listbox wrapper
List of options connected to the button with aria-controls
Helper text that uses an aria-live="polite" region for dynamic updates

Search Functionality (for search dropdowns)

Search input is properly labeled with a visually hidden label
Search input has aria-controls attribute linking it to the dropdown list
Search icon is marked as aria-hidden="true" to prevent redundant announcements

States

Inactive dropdowns use the disabled attribute on the wrapper to prevent interaction
The disabled attribute is properly reflected in the ARIA states of child elements

While the current implementation provides a good foundation for accessibility, there are still some JavaScript-dependent features that need to be implemented to ensure full accessibility support.

JavaScript Functionality

To make the dropdown components fully functional and accessible, several JavaScript features need to be implemented. Here’s an overview of the key areas to address:

Event Handling

Toggle dropdown visibility on button click
Close dropdown when clicking outside or pressing the Escape key
Handle option selection and update the selected value

Implement up/down arrow key navigation through options
Add support for Home/End keys to jump to first/last options
Implement character search for quick option selection

ARIA Attribute Management

Dynamically update aria-expanded on the dropdown button
Manage aria-selected states on options
Update aria-activedescendant to reflect the currently focused option

Search Functionality

Filter options based on search input
Update the displayed options list in real-time
Manage focus within search results

Focus Management

Control focus when opening and closing the dropdown
Implement a focus trap within the open dropdown
Restore focus appropriately when closing the dropdown

State Management

Keep track of the selected option
Maintain the open/closed state of the dropdown
Handle disabled/error states and their interactions
Manage the disabled attribute on the dropdown wrapper and ensure it’s reflected in ARIA states of child elements

Performance Considerations

Use event delegation for option list interactions
Implement debouncing for search input to optimize performance
Consider virtualizing long option lists for improved rendering performance

Dropdown

Basic Usage

Adding Search Functionality

States

Error State

Inactive State

CSS Variables

Layout and Sizing

Borders and Styling

Scrollbar Customization

Scrolling Behavior

Accessibility

Current Implementation Features

Structure and Labeling

Keyboard Support

Screen Reader Support

Search Functionality (for search dropdowns)

States

JavaScript Functionality

Event Handling

Keyboard Navigation

ARIA Attribute Management

Search Functionality

Focus Management

State Management

Performance Considerations