bsonntag / react-listbox

A customizable, accessible and controllable select for React.

react-listbox

A customizable, accessible and controllable listbox component for React.

Installation

Using npm:

npm install @bsonntag/react-listbox

Using yarn:

yarn add @bsonntag/react-listbox

Usage

import React from 'react';
import {
  Listbox,
  ListboxButton,
  ListboxButtonLabel,
  ListboxList,
  ListboxOption,
} from '@bsonntag/react-listbox';

function Select() {
  const [value, setValue] = useState();
  return (
    <Listbox value={value} onChange={setValue}>
      <ListboxButton aria-label='Fruit'>
        <ListboxButtonLabel />
      </ListboxButton>
      <ListboxList>
        <ListboxOption>Choose one fruit</ListboxOption>
        <ListboxOption value='apple'>Apple</ListboxOption>
        <ListboxOption value='banana'>Banana</ListboxOption>
        <ListboxOption value='orange'>Orange</ListboxOption>
      </ListboxList>
    </Listbox>
  );
}

Contributing

Please feel free to submit any issues or pull requests.

License

MIT

react-listbox's Issues

Add support for multiple selection

Add a multiple prop that turns the listbox into multiple selection mode.

In this mode the user can select more than one option, so clicking an option should not close the list automatically.

Enable/disable auto-selection with keyboard navigation

Add a way to enable/disable auto-selection when navigating the options with the keyboard.

Add type-ahead

Typing should select the option that matches what the user is typing.