@reach/listbox
TypeScript icon, indicating that this package has built-in type declarations

0.18.0 • Public • Published

@reach/listbox

Stable release MIT license

Docs | Source | WAI-ARIA

An accessible listbox for custom select inputs.

import * as React from "react";
import { Listbox, ListboxOption } from "@reach/listbox";
import "@reach/listbox/styles.css";

function Example(props) {
	let [value, setValue] = React.useState("default");
	return (
		<Listbox value={value} onChange={(value) => setValue(value)}>
			<ListboxOption value="default">🌮 Choose a taco</ListboxOption>
			<hr />
			<ListboxOption value="asada" valueText="Carne Asada">
				🌮 Carne Asada
			</ListboxOption>
			<ListboxOption value="pollo" valueText="Pollo">
				🌮 Pollo
			</ListboxOption>
			<ListboxOption value="pastor" valueText="Pastor">
				🌮 Pastor
			</ListboxOption>
			<ListboxOption value="lengua" valueText="Lengua">
				🌮 Lengua
			</ListboxOption>
		</Listbox>
	);
}

Readme

Keywords

none

Package Sidebar

Install

npm i @reach/listbox

Weekly Downloads

67,290

Version

0.18.0

License

MIT

Unpacked Size

234 kB

Total Files

11

Last publish

Collaborators

  • ryanflorence
  • mjackson
  • chancestrickland
  • blainekasten