0.1.6 • Public • Published

    Listbox ♿📝📦

    Build & compose WAI-ARIA compliant listbox based UI widgets.


    Install it with yarn add listbox or npm install listbox and try out this piece of JSX:

    import { Listbox, Option, OptionsList } from "listbox"
        <Option>Ford Motor Co.</Option>
        <Option>Mazda Motor Corp.</Option>
        <Option>Tesla Inc.</Option>

    This is a primitive listbox component. It abstracts away core listbox behavior and accessibility. It has no opinion on layout or styling and can be composed into other listbox based UI widgets with little code. See what kinds of widgets can composed using a primitive listbox under "Live Playground".

    Live Playground

    Check out the live, editable code examples on CodeSandbox here:

    Listbox (base): CodeSandBox | Storybook

    Listbox (grid): CodeSandBox | Storybook

    Scrollable Listbox: CodeSandBox | Storybook

    Collapsible Dropdown: CodeSandBox | Storybook

    Collapsible Dropdown (Grid): CodeSandBox | Storybook

    ComboBox: CodeSandBox | Storybook

    GitHub Icon GitHub Reaction Popup: CodeSandBox | Storybook

    Shipt Icon Shipt Search Autocomplete: CodeSandBox | Storybook

    Slack Icon Slack Mention Autocomplete: CodeSandBox | Storybook

    Local Development

    Storybook is used to interactively develop the UI components with hot reloading. This Storybook is published here.

    To run Storybook:

    Clone this repository

    git clone

    Install dependencies

    yarn install

    Run Storybook

    yarn run storybook

    Navigate to http://localhost:9009 to see live code changes during local development.


    This project uses Jest and react-testing-library 🐐 for testing.

    To run the tests

    yarn test

    or to continuously watch

    yarn test --watch


    npm i listbox

    DownloadsWeekly Downloads






    Unpacked Size

    56.7 kB

    Total Files


    Last publish


    • henryzhu