# makeup-listbox

> A JavaScript class representing an ARIA listbox

Latest version **0.5.1** (published 2026-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install makeup-listbox
pnpm add makeup-listbox
yarn add makeup-listbox
bun add makeup-listbox
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.5.1 |
| Published | 2026-04-01 |
| First published | 2021-05-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 19.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 47 |
| Author | Ian McBurnie |
| Maintainers | dylanpiercey, sendlo, ianmcburnie, agliga, saiponnada, artblue, lulavalva |

## Links

- npm: https://www.npmjs.com/package/makeup-listbox
- Repository: https://github.com/makeup/makeup-js.git#master
- Homepage: https://github.com/makeup/makeup-js/tree/master#readme
- Issues: https://github.com/makeup/makeup-js/issues
- npm.io page: https://npm.io/package/makeup-listbox

## Dependencies (2)

- [makeup-active-descendant](https://npm.io/package/makeup-active-descendant.md) ^0.8.0
- [makeup-prevent-scroll-keys](https://npm.io/package/makeup-prevent-scroll-keys.md) ^0.4.0

## Recent versions

- 0.5.1 (latest) — 2026-04-01
- 0.5.0 — 2026-03-31
- 0.4.11 — 2026-01-14
- 0.4.10 — 2025-08-19
- 0.4.9 — 2025-08-13
- 0.4.8 — 2025-04-22
- 0.4.7 — 2025-04-04
- 0.4.6 — 2025-02-27
- 0.4.5 — 2025-01-28
- 0.4.4 — 2024-12-20
- 0.4.3 — 2024-10-24
- 0.4.2 — 2024-09-03
- 0.4.1 — 2024-08-22
- 0.4.0 — 2024-06-23
- 0.3.3 — 2024-06-17
- … 8 more at https://npm.io/package/makeup-listbox/versions

## README

# makeup-listbox

A JavaScript class that represents an ARIA [listbox](https://ebay.github.io/mindpatterns/input/listbox/index.html). No CSS provided.

The listbox class is consumed by the following modules: [listbox-button](../makeup-listbox-button)</a>, [combobox](../makeup-combobox).

[View Demo](https://makeup.github.io/makeup-js/makeup-listbox/index.html).

## HTML

The following markup structure and classnames are required. Any SVG icons can be used.

```html
<div class="listbox" data-auto-select="true">
  <div class="listbox__options" role="listbox" tabindex="0">
    <div class="listbox__option" role="option" aria-selected="false">
      <span class="listbox__value">Option 1</span>
      <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
        <use href="icon.svg#icon-tick-small"></use>
      </svg>
    </div>
    <div class="listbox__option" role="option" aria-selected="false">
      <span class="listbox__value">Option 2</span>
      <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
        <use href="icon.svg#icon-tick-small"></use>
      </svg>
    </div>
    <div class="listbox__option" role="option" aria-selected="false">
      <span class="listbox__value">Option 3</span>
      <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
        <use href="icon.svg#icon-tick-small"></use>
      </svg>
    </div>
  </div>
</div>
```

## CSS

No CSS is provided. However, the class is fully compatible with [eBay Skin](https://ebay.github.io/skin/#listbox).

## JavaScript

```js
import Listbox from "makeup-listbox";

document.querySelectorAll(".listbox").forEach(function (el, i) {
  const widget = new Listbox(el, config);

  el.addEventListener("makeup-listbox-change", function (e) {
    console.log(e.type, e.detail);
  });
});
```

## Config

The constructor takes a configuration object as its second parameter.

todo

## Events

### makeup-listbox-change

Fired when the selected option changes.

- `optionIndex`: the index position of the selected option
- `optionValue`: the value of the selected option

---
_Source: https://npm.io/package/makeup-listbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._