# @reach/combobox

> Accessible React Combobox (Autocomplete).

Latest version **0.18.0** (published 2022-10-13) · MIT license · 106.3K weekly downloads

## Install

```sh
npm install @reach/combobox
pnpm add @reach/combobox
yarn add @reach/combobox
bun add @reach/combobox
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: moderate downloads; has types; esm support; no vulnerabilities.

Warnings: pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.18.0 |
| Published | 2022-10-13 |
| First published | 2019-05-21 |
| Weekly downloads | 106.3K |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 143 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | React Training |
| Maintainers | ryanflorence, mjackson, chancestrickland, blainekasten |

## Links

- npm: https://www.npmjs.com/package/@reach/combobox
- Repository: https://github.com/reach/reach-ui
- Homepage: https://github.com/reach/reach-ui#readme
- Issues: https://github.com/reach/reach-ui/issues
- npm.io page: https://npm.io/package/@reach/combobox

## Dependencies (6)

- [@reach/utils](https://npm.io/package/@reach/utils.md) 0.18.0
- [@reach/portal](https://npm.io/package/@reach/portal.md) 0.18.0
- [@reach/auto-id](https://npm.io/package/@reach/auto-id.md) 0.18.0
- [@reach/popover](https://npm.io/package/@reach/popover.md) 0.18.0
- [@reach/descendants](https://npm.io/package/@reach/descendants.md) 0.18.0
- [@reach/polymorphic](https://npm.io/package/@reach/polymorphic.md) 0.18.0

## Recent versions

- 0.18.0 (latest) — 2022-10-13
- 0.18.0-pre.5 (pre) — 2022-10-12
- 0.4.0-beta.0 (next) — 2019-10-12
- 0.18.0-pre.4 — 2022-10-12
- 0.18.0-pre.3 — 2022-10-11
- 0.18.0-pre.2 — 2022-10-11
- 0.18.0-pre.1 — 2022-10-11
- 0.18.0-pre.0 — 2022-10-11
- 0.17.0 — 2022-04-20
- 0.16.5 — 2021-12-06
- 0.16.4 — 2021-11-16
- 0.16.3 — 2021-10-19
- 0.16.2 — 2021-10-17
- 0.16.1 — 2021-08-02
- 0.16.0 — 2021-08-02
- … 48 more at https://npm.io/package/@reach/combobox/versions

## README

# @reach/combobox

[![Stable release](https://img.shields.io/npm/v/@reach/combobox.svg)](https://npm.im/@reach/combobox) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/combobox) | [Source](https://github.com/reach/reach-ui/tree/main/packages/combobox) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#combobox)

Accessible combobox (autocomplete or autosuggest) component for React.

A combobox is the combination of an `<input type="text" />` and a list. The list is designed to help the user arrive at a value, but the value does not necessarily have to come from that list. Don't think of it like a `<select />`, but more of an `<input type="text" />` with some suggestions. You can, however, validate that the value comes from the list, that's up to your app.

```js
import {
	Combobox,
	ComboboxInput,
	ComboboxPopover,
	ComboboxList,
	ComboboxOption,
	ComboboxOptionText,
} from "@reach/combobox";
import "@reach/combobox/styles.css";

function Example() {
	return (
		<div>
			<Combobox>
				<ComboboxInput aria-labelledby="demo" />
				<ComboboxPopover>
					<ComboboxList aria-labelledby="demo">
						<ComboboxOption value="Apple" />
						<ComboboxOption value="Banana" />
						<ComboboxOption value="Orange" />
						<ComboboxOption value="Pineapple" />
						<ComboboxOption value="Kiwi" />
					</ComboboxList>
				</ComboboxPopover>
			</Combobox>
		</div>
	);
}
```

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