{"_id":"@blinq-reach/combobox","name":"@blinq-reach/combobox","dist-tags":{"latest":"0.18.0"},"versions":{"0.18.0":{"name":"@blinq-reach/combobox","version":"0.18.0","description":"Accessible React Combobox (Autocomplete).","author":{"name":"React Training","email":"hello@reacttraining.com"},"license":"MIT","sideEffects":["*.css"],"repository":{"type":"git","url":"git+https://github.com/reach/reach-ui.git","directory":"packages/combobox"},"dependencies":{"@blinq-reach/auto-id":"0.18.0","@blinq-reach/descendants":"0.18.0","@blinq-reach/polymorphic":"0.18.0","@blinq-reach/popover":"0.18.0","@blinq-reach/portal":"0.18.0","@blinq-reach/utils":"0.18.0"},"devDependencies":{"latinize":"0.3.0","match-sorter":"^6.3.1","react":"^18.2.0","react-dom":"^18.2.0","tsup":"^6.1.3","@reach-internal/dev":"0.0.0","@reach-internal/test":"0.0.0","@reach-internal/tsconfig":"0.0.0"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"main":"./dist/reach-combobox.cjs.js","types":"./dist/reach-combobox.d.ts","publishConfig":{"access":"public"},"module":"./dist/reach-combobox.mjs","scripts":{"build":"tsup"},"bugs":{"url":"https://github.com/reach/reach-ui/issues"},"homepage":"https://github.com/reach/reach-ui#readme","_id":"@blinq-reach/combobox@0.18.0","_integrity":"sha512-VPxEPJPgRVkD/imm1Z6whs2q+TDc/X1CB7MUoifOBIoDHqGrQzDPiVBNOy1jaB+3rB0P5H0Shr1ZxSDYK2ePAA==","_resolved":"/tmp/631196b43e4577885cfe8502c7768453/blinq-reach-combobox-0.18.0.tgz","_from":"file:blinq-reach-combobox-0.18.0.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-VPxEPJPgRVkD/imm1Z6whs2q+TDc/X1CB7MUoifOBIoDHqGrQzDPiVBNOy1jaB+3rB0P5H0Shr1ZxSDYK2ePAA==","shasum":"8dccbf10741e9a5755f32f43b5ea7657d64630bc","tarball":"https://registry.npmjs.org/@blinq-reach/combobox/-/combobox-0.18.0.tgz","fileCount":5,"unpackedSize":6077,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB6U9fHxyJ34Ta6SE/jf7RMoIAXaTzb4R5qSsgPo/z/IAiBWIG6V4t3e+Mu8iHSGcVPtPT+go6o6SjEkgoXPNvUnMg=="}]},"_npmUser":{"name":"willhackett","email":"will@willhackett.com"},"directories":{},"maintainers":[{"name":"willhackett","email":"will@willhackett.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/combobox_0.18.0_1684374045813_0.9009600045533881"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-18T01:40:45.728Z","0.18.0":"2023-05-18T01:40:46.013Z","modified":"2023-05-18T01:40:46.253Z"},"maintainers":[{"name":"willhackett","email":"will@willhackett.com"}],"description":"Accessible React Combobox (Autocomplete).","homepage":"https://github.com/reach/reach-ui#readme","repository":{"type":"git","url":"git+https://github.com/reach/reach-ui.git","directory":"packages/combobox"},"author":{"name":"React Training","email":"hello@reacttraining.com"},"bugs":{"url":"https://github.com/reach/reach-ui/issues"},"license":"MIT","readme":"# @reach/combobox\n\n[![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)\n\n[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)\n\nAccessible combobox (autocomplete or autosuggest) component for React.\n\nA 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.\n\n```js\nimport {\n\tCombobox,\n\tComboboxInput,\n\tComboboxPopover,\n\tComboboxList,\n\tComboboxOption,\n\tComboboxOptionText,\n} from \"@blinq-reach/combobox\";\nimport \"@reach/combobox/styles.css\";\n\nfunction Example() {\n\treturn (\n\t\t<div>\n\t\t\t<Combobox>\n\t\t\t\t<ComboboxInput aria-labelledby=\"demo\" />\n\t\t\t\t<ComboboxPopover>\n\t\t\t\t\t<ComboboxList aria-labelledby=\"demo\">\n\t\t\t\t\t\t<ComboboxOption value=\"Apple\" />\n\t\t\t\t\t\t<ComboboxOption value=\"Banana\" />\n\t\t\t\t\t\t<ComboboxOption value=\"Orange\" />\n\t\t\t\t\t\t<ComboboxOption value=\"Pineapple\" />\n\t\t\t\t\t\t<ComboboxOption value=\"Kiwi\" />\n\t\t\t\t\t</ComboboxList>\n\t\t\t\t</ComboboxPopover>\n\t\t\t</Combobox>\n\t\t</div>\n\t);\n}\n```\n","readmeFilename":"README.md"}