Skip to main content

ElementCreateSearchableDropdown

Callable

  • Construct a custom searchable dropdown menu.

    The element comprises a button trigger displaying the current selection, and a popup containing a search input and a scrollable list of options. Options can optionally be grouped via the group field, which inserts a interactive header before each group of options sharing the same value.

    Parameters

    • id: string

      The id of the root container; sub-element ids are derived from it.

    • optionsList: readonly OptionItem[]

      The available options.

    • onChange: (value) => void

      Called when the selection changes.

      • optionaloptions: CreateOptions

      Returns SearchableDropdownElement

      <div id="..." class="searchable-dropdown">
          <button class="searchable-dropdown-trigger" aria-haspopup="listbox" aria-expanded="false">
              <span class="searchable-dropdown-trigger-label">Selected label</span>
              <span class="searchable-dropdown-trigger-arrow">▾</span>
          </button>
          <div class="searchable-dropdown-popup" hidden>
              <input type="search" class="searchable-dropdown-search">
              <ul role="listbox" class="searchable-dropdown-list">
                  <li role="option" data-value="..." aria-selected="true">label</li>
                  ...
              </ul>
          </div>
      </div>