Select List

A Web Component to create a list with selectable items. Combine it an input element to create a search results UI.

Demo

Take a look at the browser console. When you select an item, an event listener will log it.

Code

<input type="search" class="form-control mb-3" id="myinput" />

<bl-select-list class="list-group" id="myselectlist" for="myinput">
    <button class="list-group-item list-group-item-action">Item 1</button>
    <button class="list-group-item list-group-item-action">Item 2</button>
    <button class="list-group-item list-group-item-action">Item 3</button>
</bl-select-list>

<script>
    document.getElementById("myselectlist").addEventListener("bl-select", ({ detail }) => {
        console.log("Selected: ", detail)
    })
</script>

Together with popover and CSS Anchoring, it’s also useful to create a dropdown list.

Code

<button type="button" class="blue-anchor blue-menu-item btn" id="anchor-1" popovertarget="popover-1">
    <span class="blue-menu-item-label">Parent</span>
</button>

<bl-select-list id="popover-1" for="anchor-1" popover class="blue-anchored blue-anchored-fallback border rounded-4">
    <button type="button" class="blue-menu-item btn d-flex w-100">
        <span class="blue-menu-item-icon" aria-hidden="true">🌍</span>
        <span class="blue-menu-item-label">Child</span>
    </button>
    <button type="button" class="blue-menu-item btn d-flex w-100">
        <span class="blue-menu-item-icon" aria-hidden="true">🌑</span>
        <span class="blue-menu-item-label">Child 2</span>
    </button>
</bl-select-list>

React combo box demo

Code

  1. @/site/src/recipes/select-list/combobox-usage.tsx
  2. @/site/src/recipes/select-list/combobox.tsx

Grab the code

When you don't use the entire Blue Web library, you can also just copy and paste the required code into your own project.

  1. Copy and paste the following code into your project. Source: @/src/js/select-list.ts
Edit post on GitHub