{"id":13422312,"url":"https://github.com/anubra266/choc-autocomplete","last_synced_at":"2025-05-14T15:06:58.607Z","repository":{"id":37915063,"uuid":"367195639","full_name":"anubra266/choc-autocomplete","owner":"anubra266","description":"🏇 Autocomplete Component Package for Chakra UI","archived":false,"fork":false,"pushed_at":"2025-02-20T02:53:36.000Z","size":3468,"stargazers_count":421,"open_issues_count":2,"forks_count":54,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-12T02:56:36.662Z","etag":null,"topics":["anubra266","autocomplete","chakra-ui","choc-ui","combobox","dropdown","hacktoberfest","react","select"],"latest_commit_sha":null,"homepage":"https://githubbox.com/anubra266/choc-autocomplete/tree/main/demo","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anubra266.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"anubra266","patreon":"anubra266","kofi":"anubra266"}},"created_at":"2021-05-13T23:08:50.000Z","updated_at":"2025-04-10T14:22:57.000Z","dependencies_parsed_at":"2023-11-22T02:32:00.242Z","dependency_job_id":"baf46e34-0f50-4976-beb8-81a366b8ea45","html_url":"https://github.com/anubra266/choc-autocomplete","commit_stats":{"total_commits":394,"total_committers":22,"mean_commits":17.90909090909091,"dds":0.4467005076142132,"last_synced_commit":"3ecca8e5bf49f631b3412ca55ef3d07a096e8213"},"previous_names":[],"tags_count":136,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anubra266%2Fchoc-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anubra266%2Fchoc-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anubra266%2Fchoc-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anubra266%2Fchoc-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anubra266","download_url":"https://codeload.github.com/anubra266/choc-autocomplete/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254169323,"owners_count":22026210,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["anubra266","autocomplete","chakra-ui","choc-ui","combobox","dropdown","hacktoberfest","react","select"],"created_at":"2024-07-30T23:00:41.450Z","updated_at":"2025-05-14T15:06:58.566Z","avatar_url":"https://github.com/anubra266.png","language":"TypeScript","funding_links":["https://github.com/sponsors/anubra266","https://patreon.com/anubra266","anubra266","https://patreon.com/anubra266?utm_medium=clipboard_copy\u0026utm_source=copyLink\u0026utm_campaign=creatorshare_creator\u0026utm_content=join_link"],"categories":["TypeScript","🛠️ Tools"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n  \u003ch1\u003e\n    \u003cbr/\u003e\n    🏇\n    \u003cbr /\u003e\n    @choc-ui/chakra-autocomplete\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n  \u003c/h1\u003e\n  \u003csup\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@choc-ui/chakra-autocomplete?style=for-the-badge\"\u003e\n       \u003cimg src=\"https://img.shields.io/npm/v/@choc-ui/chakra-autocomplete.svg?style=for-the-badge\" alt=\"npm package\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@choc-ui/chakra-autocomplete?style=for-the-badge\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/dw/@choc-ui/chakra-autocomplete.svg?style=for-the-badge\" alt=\"npm  downloads\" /\u003e\n    \u003c/a\u003e\n\u003ca\u003e\n    \u003cimg alt=\"NPM\" src=\"https://img.shields.io/npm/l/@choc-ui/chakra-autocomplete?style=for-the-badge\"\u003e\n\u003c/a\u003e\n\n\u003ca\u003e\u003cimg alt=\"GitHub Repo stars\" src=\"https://img.shields.io/github/stars/anubra266/choc-autocomplete?logo=github\u0026style=for-the-badge\"\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-15-orange.svg?style=flat-square)](#contributors-)\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n\u003c/a\u003e\n    \u003cbr /\u003e\n    AutoComplete Component for the \u003ca href=\"https://chakra-ui.com\"\u003eChakra UI\u003c/a\u003e Library.\u003c/em\u003e\n\n  \u003c/sup\u003e\n\u003c/div\u003e\n\n## Chakra V3 and V2 Support\n\nAutoComplete Version 6+ supports [Chakra UI V3](https://www.chakra-ui.com/).  If you are using [Chakra UI V2](https://v2.chakra-ui.com/), please continue to use the current choc-autocomplete v5.X.  We will continue to try and support Chakra V2 but will eventually be removed once V3 becomes more widely adopted.\n\nFor help migrating from Chakra UI V2 to V3, please see their [migration guide](https://chakra-ui.com/docs/get-started/migration)\n\nThe public API of the AutoComplete components have not changed with this migration.\n\n## Known issues with Chakra V3\n\nThere is only 1 known display issue with Chakra V3.  When using the `multiple` prop, it is no longer possible to replicate the same styling to the `Box` wrapper as what the underlying `Input` is using.  We are still looking into ways to resolve this, but neither the Chakra nor next-themes teams have published guidance on this yet. \n\n## Install\n\n```bash\nnpm i --save @choc-ui/chakra-autocomplete\n#or\nyarn add @choc-ui/chakra-autocomplete\n```\n\n## Preview\n\n### With Mouse\n\n![](./assets/mouse.gif)\n\n### With Keyboard\n\n![](./assets/keyboard.gif)\n\n## Usage\n\n### Basic Usage\n\n```js\nimport { Flex, Field } from \"@chakra-ui/react\";\nimport {\n  AutoComplete,\n  AutoCompleteInput,\n  AutoCompleteItem,\n  AutoCompleteList,\n} from \"@choc-ui/chakra-autocomplete\";\n\nfunction App() {\n  const countries = [\n    \"nigeria\",\n    \"japan\",\n    \"india\",\n    \"united states\",\n    \"south korea\",\n  ];\n\n  return (\n    \u003cFlex pt=\"48\" justify=\"center\" align=\"center\" w=\"full\"\u003e\n      \u003cField.Root w=\"60\"\u003e\n        \u003cField.Label\u003eOlympics Soccer Winner\u003c/Field.Label\u003e\n        \u003cAutoComplete openOnFocus\u003e\n          \u003cAutoCompleteInput variant=\"subtle\" /\u003e\n          \u003cAutoCompleteList\u003e\n            {countries.map((country, cid) =\u003e (\n              \u003cAutoCompleteItem\n                key={`option-${cid}`}\n                value={country}\n                textTransform=\"capitalize\"\n              \u003e\n                {country}\n              \u003c/AutoCompleteItem\u003e\n            ))}\n          \u003c/AutoCompleteList\u003e\n        \u003c/AutoComplete\u003e\n        \u003cField.HelperText\u003eWho do you support.\u003c/Field.HelperText\u003e\n      \u003c/Field.Root\u003e\n    \u003c/Flex\u003e\n  );\n}\n\nexport default App;\n```\n\n\u003cimg width=\"792\" alt=\"CleanShot 2021-07-28 at 23 47 57@2x\" src=\"https://user-images.githubusercontent.com/30869823/127406028-1b20b6c7-d2f4-4a27-a0f4-2a07598e7dfa.png\"\u003e\n\n### Creating Groups\n\nYou can create groups with the `AutoCompleteGroup` Component, and add a title with the `AutoCompleteGroupTitle` component.\n\n```js\nimport React from \"react\";\nimport {\n  AutoComplete,\n  AutoCompleteGroup,\n  AutoCompleteGroupTitle,\n  AutoCompleteInput,\n  AutoCompleteItem,\n  AutoCompleteList,\n} from \"@choc-ui/chakra-autocomplete\";\nimport { Stack, Text } from \"@chakra-ui/react\";\n\nexport default function App() {\n  const continents = {\n    africa: [\"nigeria\", \"south africa\"],\n    asia: [\"japan\", \"south korea\"],\n    europe: [\"united kingdom\", \"russia\"],\n  };\n  return (\n    \u003cStack direction=\"column\"\u003e\n      \u003cText\u003eGroup \u003c/Text\u003e\n      \u003cAutoComplete openOnFocus\u003e\n        \u003cAutoCompleteInput placeholder=\"Search...\" variant=\"subtle\" /\u003e\n        \u003cAutoCompleteList\u003e\n          {Object.entries(continents).map(([continent, countries], co_id) =\u003e (\n            \u003cAutoCompleteGroup key={co_id} showDivider\u003e\n              \u003cAutoCompleteGroupTitle textTransform=\"capitalize\"\u003e\n                {continent}\n              \u003c/AutoCompleteGroupTitle\u003e\n              {countries.map((country, c_id) =\u003e (\n                \u003cAutoCompleteItem\n                  key={c_id}\n                  value={country}\n                  textTransform=\"capitalize\"\n                \u003e\n                  {country}\n                \u003c/AutoCompleteItem\u003e\n              ))}\n            \u003c/AutoCompleteGroup\u003e\n          ))}\n        \u003c/AutoCompleteList\u003e\n      \u003c/AutoComplete\u003e\n    \u003c/Stack\u003e\n  );\n}\n```\n\n\u003cimg width=\"661\" alt=\"CleanShot 2021-07-29 at 01 18 47@2x\" src=\"https://user-images.githubusercontent.com/30869823/127412483-89639ae2-34a7-4f59-9da0-287cd83cd035.png\"\u003e\n\n## Accessing the internal state\n\nTo access the internal state of the `AutoComplete`, use a function as children (commonly known as a render prop). You'll get access to the internal state `isOpen`, with the `onOpen` and `onClose` methods.\n\n```js\nimport {\n  Flex,\n  Field, \n  Icon\n} from \"@chakra-ui/react\";\nimport * as React from \"react\";\nimport {\n  AutoComplete,\n  AutoCompleteInput,\n  AutoCompleteItem,\n  AutoCompleteList,\n} from \"@choc-ui/chakra-autocomplete\";\nimport { FiChevronRight, FiChevronDown } from \"react-icons/fi\";\nimport { InputGroup } from \"./components/ui/input-group\";\n\nfunction App() {\n  const countries = [\n    \"nigeria\",\n    \"japan\",\n    \"india\",\n    \"united states\",\n    \"south korea\",\n  ];\n\n  return (\n    \u003cFlex pt=\"48\" justify=\"center\" align=\"center\" w=\"full\"\u003e\n      \u003cField.Root w=\"60\"\u003e\n        \u003cField.Label\u003eOlympics Soccer Winner\u003c/Field.Label\u003e\n        \u003cAutoComplete openOnFocus\u003e\n          {({ isOpen }) =\u003e (\n            \u003c\u003e\n              \u003cInputGroup \n                endElement={\u003cIcon\u003e{isOpen ? \u003cFiChevronRight /\u003e : \u003cFiChevronDown /\u003e}\u003c/Icon\u003e}\n              \u003e\n                \u003cAutoCompleteInput variant=\"subtle\" placeholder=\"Search...\" /\u003e\n              \u003c/InputGroup\u003e\n              \u003cAutoCompleteList\u003e\n                {countries.map((country, cid) =\u003e (\n                  \u003cAutoCompleteItem\n                    key={`option-${cid}`}\n                    value={country}\n                    textTransform=\"capitalize\"\n                  \u003e\n                    {country}\n                  \u003c/AutoCompleteItem\u003e\n                ))}\n              \u003c/AutoCompleteList\u003e\n            \u003c/\u003e\n          )}\n        \u003c/AutoComplete\u003e\n        \u003cField.HelperText\u003eWho do you support.\u003c/Field.HelperText\u003e\n      \u003c/Field.Root\u003e\n    \u003c/Flex\u003e\n  );\n}\n\nexport default App;\n```\n\n\u003cimg width=\"1002\" alt=\"CleanShot 2021-07-29 at 01 29 46@2x\" src=\"https://user-images.githubusercontent.com/30869823/127413256-053d280f-46b7-4b12-bc49-c482963b857f.png\"\u003e\n\n## Custom Rendering\n\nYou can Render whatever you want. The `AutoComplete` Items are regular `Chakra` Boxes.\n\n```js\nimport React from \"react\";\nimport {\n  AutoComplete,\n  AutoCompleteGroup,\n  AutoCompleteInput,\n  AutoCompleteItem,\n  AutoCompleteList,\n} from \"@choc-ui/chakra-autocomplete\";\nimport { Stack, Text } from \"@chakra-ui/react\";\nimport { Avatar } from \"./components/ui/avatar\";\n\nexport default function App() {\n  const europeans = [\n    { name: \"Dan Abramov\", image: \"https://bit.ly/dan-abramov\" },\n    { name: \"Kent Dodds\", image: \"https://bit.ly/kent-c-dodds\" },\n    { name: \"Ryan Florence\", image: \"https://bit.ly/ryan-florence\" },\n  ];\n  const nigerians = [\n    { name: \"Segun Adebayo\", image: \"https://bit.ly/sage-adebayo\" },\n    { name: \"Prosper Otemuyiwa\", image: \"https://bit.ly/prosper-baba\" },\n  ];\n  return (\n    \u003cStack direction=\"column\"\u003e\n      \u003cText\u003eCustom Render \u003c/Text\u003e\n      \u003cAutoComplete rollNavigation\u003e\n        \u003cAutoCompleteInput variant=\"subtle\" placeholder=\"Search...\" /\u003e\n        \u003cAutoCompleteList\u003e\n          \u003cAutoCompleteGroup title=\"Nigerians\" showDivider\u003e\n            {nigerians.map((person, oid) =\u003e (\n              \u003cAutoCompleteItem\n                key={`nigeria-${oid}`}\n                value={person.name}\n                textTransform=\"capitalize\"\n                align=\"center\"\n              \u003e\n                \u003cAvatar size=\"sm\" name={person.name} src={person.image} /\u003e\n                \u003cText ml=\"4\"\u003e{person.name}\u003c/Text\u003e\n              \u003c/AutoCompleteItem\u003e\n            ))}\n          \u003c/AutoCompleteGroup\u003e\n          \u003cAutoCompleteGroup title=\"Europeans\" showDivider\u003e\n            {europeans.map((person, oid) =\u003e (\n              \u003cAutoCompleteItem\n                key={`europe-${oid}`}\n                value={person.name}\n                textTransform=\"capitalize\"\n                align=\"center\"\n              \u003e\n                \u003cAvatar size=\"sm\" name={person.name} src={person.image} /\u003e\n                \u003cText ml=\"4\"\u003e{person.name}\u003c/Text\u003e\n              \u003c/AutoCompleteItem\u003e\n            ))}\n          \u003c/AutoCompleteGroup\u003e\n        \u003c/AutoCompleteList\u003e\n      \u003c/AutoComplete\u003e\n    \u003c/Stack\u003e\n  );\n}\n\n```\n\n\u003cimg width=\"541\" alt=\"CleanShot 2021-07-29 at 01 35 03@2x\" src=\"https://user-images.githubusercontent.com/30869823/127413575-9cea8ee8-3fd3-4720-8d87-7e1f996144be.png\"\u003e\n\n## Multi Select with Tags\n\nAdd the `multiple` prop to `AutoComplete` component, the `AutoCompleteInput` will now expose the tags in it's children function.\nThe `onChange` prop now returns an array of the chosen `values`\n\nNow you can map the tags with the `AutoCompleteTag` component or any other component of your choice. The `label` and the `onRemove` method are now exposed.\n\n**Important** - With Chakra UI V3, it is no longer possible to replicate the same styling to the `Box` wrapper as what the underlying `Input` is using.  We are still looking into ways to resolve this, but neither the Chakra nor next-themes teams have published guidance on this yet. \n\n```js\nimport React from \"react\";\nimport {\n  AutoComplete,\n  AutoCompleteInput,\n  AutoCompleteItem,\n  AutoCompleteList,\n  AutoCompleteTag,\n} from \"@choc-ui/chakra-autocomplete\";\nimport { Stack, Text } from \"@chakra-ui/react\";\n\nexport default function App() {\n  const countries = [\n    \"nigeria\",\n    \"japan\",\n    \"india\",\n    \"united states\",\n    \"south korea\",\n  ];\n  return (\n    \u003cStack direction=\"column\"\u003e\n      \u003cText\u003eMulti select with tags\u003c/Text\u003e\n      \u003cAutoComplete openOnFocus multiple onChange={(vals) =\u003e console.log(vals)}\u003e\n        \u003cAutoCompleteInput placeholder=\"Search...\" variant=\"subtle\"\u003e\n          {({ tags }) =\u003e\n            tags.map((tag, tid) =\u003e (\n              \u003cAutoCompleteTag\n                key={tid}\n                label={tag.label}\n                onRemove={tag.onRemove}\n              /\u003e\n            ))\n          }\n        \u003c/AutoCompleteInput\u003e\n        \u003cAutoCompleteList\u003e\n          {countries.map((country, cid) =\u003e (\n            \u003cAutoCompleteItem\n              key={`option-${cid}`}\n              value={country}\n              textTransform=\"capitalize\"\n              _selected={{ bg: \"whiteAlpha.50\" }}\n              _focus={{ bg: \"whiteAlpha.100\" }}\n            \u003e\n              {country}\n            \u003c/AutoCompleteItem\u003e\n          ))}\n        \u003c/AutoCompleteList\u003e\n      \u003c/AutoComplete\u003e\n    \u003c/Stack\u003e\n  );\n}\n```\n\n![Kapture 2021-07-29 at 02 05 53](https://user-images.githubusercontent.com/30869823/127415996-09a5df7c-a356-4a22-ad9c-60d09963cfc6.gif)\n\n## Creatable Items\n\nI know that title hardly expresses the point, but yeah, naming is tough. You might want your users to be able to add extra items when their options are not available in the provided options. e.g. adding a new tag to your Polywork profile.\n\nFirst add the `creatable` prop to the `AutoComplete` component.\nThen add the `AutoCompleteCreatable` component to the bottom of the list. Refer to the references for more info on this component.\n\n```js\nimport React from \"react\";\nimport {\n  AutoComplete,\n  AutoCompleteCreatable,\n  AutoCompleteInput,\n  AutoCompleteItem,\n  AutoCompleteList,\n  AutoCompleteTag,\n} from \"@choc-ui/chakra-autocomplete\";\nimport { Stack, Text } from \"@chakra-ui/react\";\n\nexport default function App() {\n  const options = [\"apple\", \"appoint\", \"zap\", \"cap\", \"japan\"];\n  return (\n    \u003cStack direction=\"column\"\u003e\n      \u003cText\u003eCreatable \u003c/Text\u003e\n      \u003cAutoComplete multiple rollNavigation creatable\u003e\n        \u003cAutoCompleteInput\n          variant=\"subtle\"\n          placeholder=\"Search basic...\"\n          autoFocus\n        \u003e\n          {({ tags }) =\u003e\n            tags.map((tag, tid) =\u003e (\n              \u003cAutoCompleteTag\n                key={tid}\n                label={tag.value}\n                onRemove={tag.onRemove}\n                disabled={tag.label === \"japan\"}\n              /\u003e\n            ))\n          }\n        \u003c/AutoCompleteInput\u003e\n        \u003cAutoCompleteList\u003e\n          {options.map((option, oid) =\u003e (\n            \u003cAutoCompleteItem\n              key={`option-${oid}`}\n              value={option}\n              textTransform=\"capitalize\"\n            \u003e\n              {option}\n            \u003c/AutoCompleteItem\u003e\n          ))}\n          \u003cAutoCompleteCreatable /\u003e\n        \u003c/AutoCompleteList\u003e\n      \u003c/AutoComplete\u003e\n    \u003c/Stack\u003e\n  );\n}\n\n```\n\n\u003cimg width=\"517\" alt=\"CleanShot 2021-07-29 at 02 29 20@2x\" src=\"https://user-images.githubusercontent.com/30869823/127417453-e78b9b48-26e8-4ff0-a264-1d6bb4717ab0.png\"\u003e\n\n## Loading State\n\nNeed to pull data from API, but don't want your users to see a blank screen?  You can enable the loading state by passing the `isLoading` prop to `AutoComplete`.  By doing this, 2 other props will be enabled\n\n1. `loadingIcon` on `AutoCompleteInput` will display some sort of loading icon on the right side of the input.  By default, a `Spinner` will be displayed, but you can pass in any custom element to be rendered\n\n2. `loadingState` on `AutoCompleteList` can display custom loading content when `isLoading` is `true`.  All content will be rendered in the center of the list.  By default, a `Spinner` will be displayed, but you can pass in any custom element to be rendered.\n\nBest practice is to combine `setTimeout` and `useEffect` to create a debounce effect.  This will prevent un-necessary API calls if your user types relatively quickly.\n\nA working code demo can be found [here](https://codesandbox.io/s/choc-ui-chakra-autocomplete-loading-tfc8jz)\n\n## Integration with Form Libraries\n\nIt is relatively easy to integrate with form libaries such as `React Hook Form`, `Formik`, and others.  Working examples can be found in the `demos` folder of this repo.  See the [Contributing](#contribute) section of this doc on how to clone and set it up for testing.\n\nDoes your favorite form library not have a working example?  Submit a PR to get it added and help others using this library quickly get up and running.\n\n## Autocomplete methods\n\nAssign a ref to the `AutoComplete` component and call the available methods with:\n\n```js\nref.current?.resetItems();\nref.current?.removeItem(itemValue);\n```\n\n### Codesandbox Link [Here](https://githubbox.com/anubra266/choc-autocomplete/tree/main/demo)\n\n## API Reference\n\n**NB**: Feel free to request any additional `Prop` in [Issues](https://github.com/anubra266/choc-autocomplete/issues/new/).\n\n### **AutoComplete**\n\nWrapper and Provider for `AutoCompleteInput` and `AutoCompleteList`\n\n**AutoComplete** composes [**Box**](https://chakra-ui.com/docs/components/box) so you can pass all Box props to change its style.\n\n**NB:** None of the props passed to it are required.\n\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eProp\u003c/td\u003e\n            \u003ctd\u003eType\u003c/td\u003e\n            \u003ctd\u003eDescription\u003c/td\u003e\n            \u003ctd\u003eDefault\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ecloseOnBlur\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003eclose suggestions when input is blurred \u003c/td\u003e\n            \u003ctd\u003etrue\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ecloseOnSelect\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003eclose suggestions when a suggestions is selected\u003c/td\u003e\n            \u003ctd\u003etrue when multiple=false, false when multiple=true\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ecreatable\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003eAllow addition of arbitrary values not present in suggestions\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003edefaultIsOpen\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003eSuggestions list is open by default\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eprefocusFirstItem\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003eShould prefocus first item intially, on query change, on open, and on filter out of current focused item\u003c/td\u003e\n            \u003ctd\u003etrue\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n            \u003ctd\u003edefaultValues\u003c/td\u003e\n            \u003ctd\u003eArray\u003c/td\u003e\n            \u003ctd\u003eUsed to predefine tags, or value for the autocomplete component. Just pass an array of the values\u003c/td\u003e\n            \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n            \u003ctd\u003edisableFilter\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003edisables filtering when set to true\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eemphasize\u003c/td\u003e\n            \u003ctd\u003eboolean | SystemStyleObject\u003c/td\u003e\n            \u003ctd\u003eHighlight matching characters in suggestions, you can pass the styles - false\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003edefaultEmptyStateProps\u003c/td\u003e\n            \u003ctd\u003eFlexProps\u003c/td\u003e\n            \u003ctd\u003eProps to pass into the `Flex` component when using the default empty state.  Does not apply when you supply your own custom `emptyState`\u003c/td\u003e\n            \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eemptyState\u003c/td\u003e\n            \u003ctd\u003e\n\n```ts\nboolean | MaybeRenderProp\u003c{ value: Item[\"value\"] }\u003e\n```\n\n\u003c/td\u003e\n            \u003ctd\u003erender message when no suggestions match query\u003c/td\u003e\n            \u003ctd\u003etrue\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003efilter\u003c/td\u003e\n            \u003ctd\u003e\n\n```ts\n(query: string, optionValue: Item[\"value\"], optionLabel: Item[\"label\"]) =\u003e\n  boolean;\n```\n\n\u003c/td\u003e\n            \u003ctd\u003ecustom filter function\u003c/td\u003e\n            \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003efocusInputOnSelect\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003efocus input after a suggestion is selected \u003c/td\u003e\n            \u003ctd\u003etrue\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003efreeSolo\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003eallow entering of any arbitrary values\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eisReadOnly\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003eMake the component read-only\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eisLoading\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003eDisplay loading animation on both the input and list elements\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n            \u003ctd\u003elistAllValuesOnFocus\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003eShow all suggestions when user focuses the input, while it's not empty.\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n            \u003ctd\u003ematchWidth\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003eChakra UI \u003ca href=\"https://chakra-ui.com/docs/components/popover#same-width\"\u003ePopover.positioning.sameWidth\u003c/a\u003e property to match the popover content's width to the width of the container\u003c/td\u003e\n            \u003ctd\u003etrue\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003emaxSelections\u003c/td\u003e\n            \u003ctd\u003enumber\u003c/td\u003e\n            \u003ctd\u003elimit possible number of tag selections in multiple mode\u003c/td\u003e\n            \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003emaxSuggestions\u003c/td\u003e\n            \u003ctd\u003enumber\u003c/td\u003e\n            \u003ctd\u003elimit number of suggestions in list\u003c/td\u003e\n            \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003emultiple\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003eallow tags multi selection\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eonChange\u003c/td\u003e\n            \u003ctd\u003e\n\n```ts\n(value: string | Item[\"value\"][], item: Item| Item[]) =\u003e void\n```\n\n\u003c/td\u003e\n            \u003ctd\u003efunction to run whenever autocomplete value(s) changes\u003c/td\u003e\n            \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eonSelectOption\u003c/td\u003e\n            \u003ctd\u003e\n\n```ts\n(params: {\n    item: Item;\n    selectMethod: \"mouse\" | \"keyboard\" | null;\n    isNewInput: boolean;\n  }) =\u003e boolean | void\n```\n\u003c/td\u003e\n            \u003ctd\u003emethod to call whenever a suggestion is selected\u003c/td\u003e\n            \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eonOptionFocus\u003c/td\u003e\n            \u003ctd\u003e\n\n```ts\n(params: {\n    item: Item;\n    focusMethod: \"mouse\" | \"keyboard\" | null;\n    isNewInput: boolean;\n  }) =\u003e boolean | void\n```\n\n\u003c/td\u003e\n            \u003ctd\u003emethod to call whenever a suggestion is focused\u003c/td\u003e\n            \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eonReady\u003c/td\u003e\n            \u003ctd\u003e\n\n```ts\n(props:{tags:ItemTag[]}) =\u003e void\n```\n\u003c/td\u003e\n            \u003ctd\u003emethod that exposes variables used in component\u003c/td\u003e\n            \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eonTagRemoved\u003c/td\u003e\n            \u003ctd\u003e\n\n```ts\n(removedTag: Item[\"value\"],item: Item, tags: Item[\"value\"][]) =\u003e void\n```\n\u003c/td\u003e\n            \u003ctd\u003emethod to call whenever a tag is removed\u003c/td\u003e\n            \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eopenOnFocus\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003eopen suggestions when input is focuses\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eplacement\u003c/td\u003e\n            \u003ctd\u003ePlacementWithLogical\u003c/td\u003e\n            \u003ctd\u003ewhere autocomplete list will display.  Accepts any valid value from \u003ca href=\"https://chakra-ui.com/docs/components/popover#placement\"\u003ePopover\u003c/a\u003e component\u003c/td\u003e\n            \u003ctd\u003ebottom\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003erestoreOnBlurIfEmpty\u003c/td\u003e\n          \u003ctd\u003eboolean\u003c/td\u003e\n          \u003ctd\u003eif false, clearing the value of the input field will also clear the selected option\u003c/td\u003e\n          \u003ctd\u003etrue\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003erollNavigation\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003eallow keyboard navigation to switch to alternate ends when one end is reached\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eselectOnFocus\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003eselect the text in input when it's focused\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eshouldRenderSuggestions\u003c/td\u003e\n            \u003ctd\u003e\n\n```ts\n(value: string) =\u003e boolean\n```\n\u003c/td\u003e\n            \u003ctd\u003efunction to decide if suggestions should render, e.g. show suggestions only if there are at least two characters in the query value\u003c/td\u003e\n            \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003esubmitKeys;\n\u003c/td\u003e\n            \u003ctd\u003e\n\n```ts\nstring[]\n```\n\n\u003c/td\u003e\n            \u003ctd\u003eA list of \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values\"\u003eKeyboardEvent: key values\u003c/a\u003e, except for the \"Enter\" key, that trigger the click event of the currently selected Item.\u003c/td\u003e\n            \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n        \u003c/tr\u003e\n         \u003ctr\u003e\n            \u003ctd\u003esuggestWhenEmpty\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003eshow suggestions when input value is empty\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003evalue\u003c/td\u003e\n            \u003ctd\u003eany\u003c/td\u003e\n            \u003ctd\u003evalue of the component in the controlled state\u003c/td\u003e\n            \u003ctd\u003e---\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n### **AutoCompleteTag**\n\nTags for multiple mode\n\n**AutoCompleteTag** composes [**Tag**](https://chakra-ui.com/docs/components/tag) so you can pass all Tag props to change its style.\n\n\u003ctable\u003e\n\u003cthead\u003e\n  \u003ctr\u003e\n    \u003cth\u003eProp\u003cbr\u003e\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n  \u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n \u003ctr\u003e\n    \u003ctd\u003edisabled\u003c/td\u003e\n    \u003ctd\u003e\n\n    string\n\n  \u003c/td\u003e\n    \u003ctd\u003eIn the event that you need to lock certain tag so that they can't be removed in the interface, you can set the tags disabled.\u003c/td\u003e\n    \u003ctd\u003eNo\u003cbr\u003e\u003c/td\u003e\n    \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003elabel\u003c/td\u003e\n    \u003ctd\u003e\n\n    string\n\n  \u003c/td\u003e\n    \u003ctd\u003eLabel that is displayed on the tag\u003c/td\u003e\n    \u003ctd\u003eYes\u003cbr\u003e\u003c/td\u003e\n    \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eonRemove\u003c/td\u003e\n    \u003ctd\u003e\n\n```ts\n() =\u003e void\n```\n\n  \u003c/td\u003e\n    \u003ctd\u003eMethod to remove the tag from selected values\u003c/td\u003e\n    \u003ctd\u003eYes\u003cbr\u003e\u003c/td\u003e\n    \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n  \u003c/tr\u003e\n\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n### **AutoCompleteInput**\n\nInput for `AutoComplete` value.\n\n**AutoCompleteInput** composes [**Input**](https://chakra-ui.com/docs/components/input) so you can pass all Input props to change its style.\n\n\u003ctable\u003e\n\u003cthead\u003e\n  \u003ctr\u003e\n    \u003cth\u003eProp\u003cbr\u003e\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n  \u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n  \u003ctr\u003e\n    \u003ctd\u003echildren\u003c/td\u003e\n    \u003ctd\u003e\n\n```ts\ntype children = MaybeRenderProp\u003c{\n  tags: Item \u0026 { onRemove: () =\u003e void }[];\n}\u003e;\n```\n\n  \u003c/td\u003e\n    \u003ctd\u003e\n\ncallback that returns `ReactNode` and is provided with tags in `multiple` mode\ne.g.\n\n```js\n\u003cAutoCompleteInput variant=\"subtle\"\u003e\n  {({ tags }) =\u003e\n    tags.map((tag, tid) =\u003e (\n      \u003cAutoCompleteTag key={tid} label={tag.label} onRemove={tag.onRemove} /\u003e\n    ))\n  }\n\u003c/AutoCompleteInput\u003e\n```\n\n  \u003c/td\u003e\n    \u003ctd\u003eNo\u003cbr\u003e\u003c/td\u003e\n    \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003eref\u003c/td\u003e\n    \u003ctd\u003e\n\n```js\nRefObject\u003cHTMLInputElement\u003e\n```\n\n  \u003c/td\u003e\n    \u003ctd\u003eprovides a ref to the input element so the value can be referenced in additional contexts\u003c/td\u003e\n    \u003ctd\u003eNo\u003cbr\u003e\u003c/td\u003e\n    \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ehidePlaceholder\u003c/td\u003e\n    \u003ctd\u003eboolean\u003c/td\u003e\n    \u003ctd\u003ehides the placeholder when children is not an empty array. intended usage for\n\n```js\n\u003cAutoComplete multiple creatable /\u003e\n```\n\n  \u003c/td\u003e\n    \u003ctd\u003eNo\u003cbr\u003e\u003c/td\u003e\n    \u003ctd\u003efalse\u003c/td\u003e\n\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eloadingIcon\u003c/td\u003e\n    \u003ctd\u003e\n\n    React.ReactNode | JSX\n\n  \u003c/td\u003e\n  \u003ctd\u003eElement that will be displayed when isLoading is true\u003c/td\u003e\n  \u003ctd\u003eNo\u003c/td\u003e\n  \u003ctd\u003e\u003ca href=\"https://chakra-ui.com/docs/components/spinner\"\u003eSpinner\u003c/a\u003e from Chakra-UI\u003c/td\u003e\n  \u003c/tr\u003e\n\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n### **AutoCompleteList**\n\nWrapper for `AutoCompleteGroup` and `AutoCompleteItem`\n\n**AutoCompleteList** composes [**Box**](https://chakra-ui.com/docs/components/box) so you can pass all Box props to change its style.\n\n\u003ctable\u003e\n\u003cthead\u003e\n  \u003ctr\u003e\n    \u003cth\u003eProp\u003cbr\u003e\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n  \u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eloadingState\u003c/td\u003e\n    \u003ctd\u003eReact.ReactNode | JSX\u003c/td\u003e\n    \u003ctd\u003eContent displayed in list while isLoading is true.  Content will be centered\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003e\u003ca href=\"https://chakra-ui.com/docs/components/spinner\"\u003eSpinner\u003c/a\u003e from Chakra-UI with an md size\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n### **AutoCompleteGroup**\n\nWrapper for collections of `AutoCompleteItem`s\n\n**AutoCompleteGroup** composes [**Box**](https://chakra-ui.com/docs/components/box) so you can pass all Box props to change its style.\n\n\u003cTable\u003e\n\u003cthead\u003e\n  \u003ctr\u003e\n    \u003cth\u003eProp\u003cbr\u003e\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n  \u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eshowDivider\u003c/td\u003e\n    \u003ctd\u003eboolean\u003c/td\u003e\n    \u003ctd\u003eIf true, a divider is shown\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003efalse\u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003edividerColor\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003eColor for divider, if present\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003einherit\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/tbody\u003e\n\n\u003c/table\u003e\n\n### **AutoCompleteItem**\n\nThis Composes your suggestions\n\n**AutoCompleteItem** composes [**Flex**](https://chakra-ui.com/docs/components/flex) so you can pass all Flex props to change its style.\n\n\u003ctable\u003e\n\u003cthead\u003e\n  \u003ctr\u003e\n    \u003cth\u003eProp\u003cbr\u003e\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n  \u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n  \u003ctr\u003e\n    \u003ctd\u003egetValue\u003c/td\u003e\n    \u003ctd\u003e(value:any) =\u003e any\u003c/td\u003e\n    \u003ctd\u003eA method used to determine the key that holds the value, when the value prop is an object\u003c/td\u003e\n    \u003ctd\u003eno\u003cbr\u003e\u003c/td\u003e\n    \u003ctd\u003e\n\n```js\nval =\u003e val;\n```\n\n\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003elabel\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003eThe label for the Option\u003c/td\u003e\n    \u003ctd\u003eno\u003cbr\u003e\u003c/td\u003e\n    \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003evalue\u003c/td\u003e\n    \u003ctd\u003estring or Object\u003c/td\u003e\n    \u003ctd\u003eThe value of the Option\u003c/td\u003e\n    \u003ctd\u003eyes\u003cbr\u003e\u003c/td\u003e\n    \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003efixed\u003c/td\u003e\n    \u003ctd\u003e\n\n    boolean\n\n\u003c/td\u003e\n    \u003ctd\u003eMake an item visible at all times, regardless of filtering or maxSuggestions\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e_fixed\u003c/td\u003e\n    \u003ctd\u003eSystemStyleObject\u003c/td\u003e\n    \u003ctd\u003eStyles for fixed Itemm\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003e\n\n```js\n{\n  fontWeight: 'extrabold',\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003evalue\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003eThe value of the Option\u003c/td\u003e\n    \u003ctd\u003eyes\u003cbr\u003e\u003c/td\u003e\n    \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003edisabled\u003c/td\u003e\n    \u003ctd\u003e\n\n    boolean\n\n\u003c/td\u003e\n    \u003ctd\u003eMake an item disabled, so it cannot be selected\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e_disabled\u003c/td\u003e\n    \u003ctd\u003eSystemStyleObject\u003c/td\u003e\n    \u003ctd\u003eStyles for disabled Item(s)\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003e\n\n```js\n{\n  fontWeight: 'extrabold',\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e_selected\u003c/td\u003e\n    \u003ctd\u003eSystemStyleObject\u003c/td\u003e\n    \u003ctd\u003eStyles for selected Item(s)\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003e\n\n```js\n{\n  fontWeight: 'extrabold',\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e_focus\u003c/td\u003e\n    \u003ctd\u003eSystemStyleObject\u003c/td\u003e\n    \u003ctd\u003eStyles for focused Item\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003e\n\n```js\n{\n  fontWeight: 'extrabold',\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n### **AutoCompleteCreatable**\n\nUsed with the `AutoComplete` component's `creatable` prop, to allow users enter arbitrary values, not available in the provided options.\n\n**AutoCompleteCreatable** composes [**Flex**](https://chakra-ui.com/docs/components/flex) so you can pass all Flex props to change its style.\n\nIt also accepts a function as its `children` prop which is provided with the current `inputValue`.\n\n\u003ctable\u003e\n\u003cthead\u003e\n  \u003ctr\u003e\n    \u003cth\u003eProp\u003cbr\u003e\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n  \u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n  \u003ctr\u003e\n    \u003ctd\u003echildren\u003c/td\u003e\n    \u003ctd\u003e\n\n```ts\ntype children = MaybeRenderProp\u003c{ value: any }\u003e;\n```\n\n  \u003c/td\u003e\n    \u003ctd\u003e\n\n`ReactNode` or callback that returns `ReactNode`\ne.g.\n\n```js\n\u003cAutoCompleteCreatable\u003e\n  {({ value }) =\u003e \u003cspan\u003eAdd {value} to List\u003c/span\u003e}\n\u003c/AutoCompleteCreatable\u003e\n```\n\n  \u003c/td\u003e\n    \u003ctd\u003eNo\u003cbr\u003e\u003c/td\u003e\n    \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003ealwaysDisplay\u003c/td\u003e\n    \u003ctd\u003e\n\n```ts\nboolean;\n```\n\n  \u003c/td\u003e\n    \u003ctd\u003e\n\nWhen true, `AutoCompleteCreatable` is shown even when the `AutoCompleteInput` is empty\n\n  \u003c/td\u003e\n    \u003ctd\u003eNo\u003cbr\u003e\u003c/td\u003e\n    \u003ctd\u003e\u0026mdash;\u0026mdash;\u0026mdash;\u003c/td\u003e\n  \u003c/tr\u003e\n\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n## Contribute\n\n- Clone this repository\n\n```sh\ngit clone https://github.com/anubra266/choc-autocomplete.git\n```\n\n- Install all dependencies (with yarn)\n\n```sh\nyarn\n```\n\n- Install package example dependencies (with yarn)\n\n```sh\ncd example\nyarn\n```\n\nStart the package server, and the example server\n\n```sh\n# root directory\nyarn start\n\n# example directory with (cd example)\nyarn dev\n```\n\n## Sponsors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://patreon.com/anubra266?utm_medium=clipboard_copy\u0026utm_source=copyLink\u0026utm_campaign=creatorshare_creator\u0026utm_content=join_link\"\u003e\n    \u003cimg src='https://cdn.jsdelivr.net/gh/anubra266/static@main/sponsors.svg'/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://anubra266.tk\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/30869823?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMaicon Carraro\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=anubra266\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://margalit.com.au\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/2268424?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSam Margalit\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=margalit\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/gepd\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/7091609?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003egepd\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=gepd\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/anubra266/choc-autocomplete/issues?q=author%3Agepd\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.linkedin.com/in/spencerkaiser\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/6445731?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSpencer Kaiser\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=SpencerKaiser\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/jcdogo\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/70533701?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ejcdogo\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=jcdogo\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/daliudzius\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/46355846?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003edaliudzius\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=daliudzius\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://fabien0102.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1761469?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFabien BERNARD\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=fabien0102\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://riccardolorenzi.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/5848941?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRiccardo Lorenzi\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=Richi2293\" title=\"Bug fixes\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/MathisFederico\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/60117466?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMathis Federico\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=MathisFederico\" title=\"Bug\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Kysluss\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/29052043?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKyle Slusser\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=Kysluss\" title=\"Code\"\u003e💻🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/sakerhetspolisen\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/68159964?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKarl F. Sellergren\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=sakerhetspolisen\" title=\"Code\"\u003e🐛🔧\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/JedBh\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/44101778?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJedediah Benhod\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=jedBh\" title=\"Code\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Janekk\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/6827881?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJanusz Kacalak\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=janekk\" title=\"Code\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ThomasHickman\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/6304200?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eThomas Hickman\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=thomashickman\" title=\"Bug\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/chrisregner\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/26005158?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eChristopher Regner\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=chrisregner\" title=\"Code\"\u003e📖🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/EinarSnorrason\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/31321506?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEinarSnorrason\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=EinarSnorrason\" title=\"Code\"\u003e💻🐛🔧\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/gbermudez1992\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/84212735?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003egbermudez1992\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=gbermudez1992\" title=\"Code\"\u003e💻🐛🔧\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ido213\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/163876909?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eido213\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=ido213\" title=\"Code\"\u003e💻🐛🔧\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/aeons\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1432894?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBjørn Madsen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=aeons\" title=\"Code\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/SupremeTechnopriest\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/2261598?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRandy Lebeau\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=SupremeTechnopriest\" title=\"Code\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/jayveebustarde\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/26862076?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJayvee Bustarde\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/anubra266/choc-autocomplete/commits?author=jayveebustarde\" title=\"Code\"\u003e🐛🔧\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanubra266%2Fchoc-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanubra266%2Fchoc-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanubra266%2Fchoc-autocomplete/lists"}