{"id":13422297,"url":"https://github.com/koolamusic/chakra-ui-autocomplete","last_synced_at":"2025-05-16T13:04:33.950Z","repository":{"id":37196944,"uuid":"299484427","full_name":"koolamusic/chakra-ui-autocomplete","owner":"koolamusic","description":"An utility autocomplete UI library to use with Chakra UI","archived":false,"fork":false,"pushed_at":"2024-04-10T21:21:42.000Z","size":4360,"stargazers_count":329,"open_issues_count":25,"forks_count":39,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-14T01:33:08.596Z","etag":null,"topics":["autocomplete","autocompletetextfield","chakra-ui","downshift","hacktoberfest","hacktoberfest-accepted","hacktoberfest2021","react"],"latest_commit_sha":null,"homepage":"https://koolamusic.github.io/chakra-ui-autocomplete/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/koolamusic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"open_collective":"chakra-ui-autocomplete"}},"created_at":"2020-09-29T02:32:23.000Z","updated_at":"2024-04-15T13:07:10.914Z","dependencies_parsed_at":"2023-11-07T17:13:26.705Z","dependency_job_id":"a5fc13c9-8496-456d-8e44-afec4a472706","html_url":"https://github.com/koolamusic/chakra-ui-autocomplete","commit_stats":{"total_commits":142,"total_committers":14,"mean_commits":"10.142857142857142","dds":0.5,"last_synced_commit":"3ee294806993169164b5e2ccb68755d57d20340c"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koolamusic%2Fchakra-ui-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koolamusic%2Fchakra-ui-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koolamusic%2Fchakra-ui-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koolamusic%2Fchakra-ui-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/koolamusic","download_url":"https://codeload.github.com/koolamusic/chakra-ui-autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247749976,"owners_count":20989712,"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":["autocomplete","autocompletetextfield","chakra-ui","downshift","hacktoberfest","hacktoberfest-accepted","hacktoberfest2021","react"],"created_at":"2024-07-30T23:00:41.254Z","updated_at":"2025-04-09T10:04:30.819Z","avatar_url":"https://github.com/koolamusic.png","language":"TypeScript","funding_links":["https://opencollective.com/chakra-ui-autocomplete","https://opencollective.com/chakra-ui-autocomplete/contribute","https://opencollective.com/chakra-ui-autocomplete/organization/0/website","https://opencollective.com/chakra-ui-autocomplete/organization/1/website","https://opencollective.com/chakra-ui-autocomplete/organization/2/website","https://opencollective.com/chakra-ui-autocomplete/organization/3/website","https://opencollective.com/chakra-ui-autocomplete/organization/4/website","https://opencollective.com/chakra-ui-autocomplete/organization/5/website","https://opencollective.com/chakra-ui-autocomplete/organization/6/website","https://opencollective.com/chakra-ui-autocomplete/organization/7/website","https://opencollective.com/chakra-ui-autocomplete/organization/8/website","https://opencollective.com/chakra-ui-autocomplete/organization/9/website"],"categories":["TypeScript","🛠️ Tools"],"sub_categories":[],"readme":"# Chakra-UI AutoComplete\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![Financial Contributors on Open Collective](https://opencollective.com/chakra-ui-autocomplete/all/badge.svg?label=financial+contributors)](https://opencollective.com/chakra-ui-autocomplete) [![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n\u003e An Accessible Autocomplete Utility for [Chakra UI](github.com/chakra-ui/chakra-ui) that composes [Downshift](https://github.com/downshift-js/downshift) ComboBox\n\n[![NPM](https://img.shields.io/npm/v/chakra-ui-autocomplete.svg)](https://www.npmjs.com/package/chakra-ui-autocomplete) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n![demo-image](./img/basic.gif)\n\n## Install\n\n**Warning* This Package is still WIP at the Moment and there might be some missing features\n\n```bash\nnpm install --save chakra-ui-autocomplete\n```\n\n## Usage\n\n- Usage Example with TSX/Typescript\n\n```tsx\nimport React from 'react'\nimport { CUIAutoComplete } from 'chakra-ui-autocomplete'\n\n\nexport interface Item {\n  label: string;\n  value: string;\n}\nconst countries = [\n  { value: \"ghana\", label: \"Ghana\" },\n  { value: \"nigeria\", label: \"Nigeria\" },\n  { value: \"kenya\", label: \"Kenya\" },\n  { value: \"southAfrica\", label: \"South Africa\" },\n  { value: \"unitedStates\", label: \"United States\" },\n  { value: \"canada\", label: \"Canada\" },\n  { value: \"germany\", label: \"Germany\" }\n];\n\nexport default function App() {\n  const [pickerItems, setPickerItems] = React.useState(countries);\n  const [selectedItems, setSelectedItems] = React.useState\u003cItem[]\u003e([]);\n\n  const handleCreateItem = (item: Item) =\u003e {\n    setPickerItems((curr) =\u003e [...curr, item]);\n    setSelectedItems((curr) =\u003e [...curr, item]);\n  };\n\n  const handleSelectedItemsChange = (selectedItems?: Item[]) =\u003e {\n    if (selectedItems) {\n      setSelectedItems(selectedItems);\n    }\n  };\n\n  return (\n        \u003cCUIAutoComplete\n          label=\"Choose preferred work locations\"\n          placeholder=\"Type a Country\"\n          onCreateItem={handleCreateItem}\n          items={pickerItems}\n          selectedItems={selectedItems}\n          onSelectedItemsChange={(changes) =\u003e\n            handleSelectedItemsChange(changes.selectedItems)\n          }\n        /\u003e\n  );\n}\n```\n\n---\n\n- Usage Example with JSX/Javascript\n\n```jsx\nimport React from 'react'\nimport { CUIAutoComplete } from 'chakra-ui-autocomplete'\n\nconst countries = [\n  { value: \"ghana\", label: \"Ghana\" },\n  { value: \"nigeria\", label: \"Nigeria\" },\n  { value: \"kenya\", label: \"Kenya\" },\n  { value: \"southAfrica\", label: \"South Africa\" },\n  { value: \"unitedStates\", label: \"United States\" },\n  { value: \"canada\", label: \"Canada\" },\n  { value: \"germany\", label: \"Germany\" }\n];\n\nexport default function App() {\n  const [pickerItems, setPickerItems] = React.useState(countries);\n  const [selectedItems, setSelectedItems] = React.useState([]);\n\n  const handleCreateItem = (item) =\u003e {\n    setPickerItems((curr) =\u003e [...curr, item]);\n    setSelectedItems((curr) =\u003e [...curr, item]);\n  };\n\n  const handleSelectedItemsChange = (selectedItems) =\u003e {\n    if (selectedItems) {\n      setSelectedItems(selectedItems);\n    }\n  };\n\n  return (\n        \u003cCUIAutoComplete\n          label=\"Choose preferred work locations\"\n          placeholder=\"Type a Country\"\n          onCreateItem={handleCreateItem}\n          items={pickerItems}\n          selectedItems={selectedItems}\n          onSelectedItemsChange={{(changes) =\u003e {\n            handleSelectedItemsChange(changes.selectedItems)\n          }}}\n        /\u003e\n  );\n}\n```\n\n[View on CodeSandbox](https://codesandbox.io/s/chakra-ui-autocomplete-example1-8uxbs)\n[![109296467-3cdbe100-7828-11eb-9491-1bd069bf90a4](https://user-images.githubusercontent.com/587136/109479134-1922d000-7aa0-11eb-9a7f-14d3a5f0d63d.png)](https://codesandbox.io/s/chakra-ui-autocomplete-example1-8uxbs)\n\n### Usage Example with Custom Item Renderer\n\n![custom-render-image](./img/custom-example.gif)\n\n\n```jsx\nimport React from 'react'\nimport { Text, Flex, Avatar } from '@chakra-ui/react'\nimport { CUIAutoComplete } from 'chakra-ui-autocomplete'\n\n\nconst countries = [\n  { value: \"ghana\", label: \"Ghana\" },\n  { value: \"nigeria\", label: \"Nigeria\" },\n  { value: \"kenya\", label: \"Kenya\" },\n  { value: \"southAfrica\", label: \"South Africa\" },\n  { value: \"unitedStates\", label: \"United States\" },\n  { value: \"canada\", label: \"Canada\" },\n  { value: \"germany\", label: \"Germany\" }\n];\n\nexport default function App() {\n  const [pickerItems, setPickerItems] = React.useState(countries);\n  const [selectedItems, setSelectedItems] = React.useState([]);\n\n  const handleCreateItem = (item) =\u003e {\n    setPickerItems((curr) =\u003e [...curr, item]);\n    setSelectedItems((curr) =\u003e [...curr, item]);\n  };\n\n  const handleSelectedItemsChange = (selectedItems) =\u003e {\n    if (selectedItems) {\n      setSelectedItems(selectedItems);\n    }\n  };\n\n  const customRender = (selected) =\u003e {\n    return (\n      \u003cFlex flexDir=\"row\" alignItems=\"center\"\u003e\n        \u003cAvatar mr={2} size=\"sm\" name={selected.label} /\u003e\n        \u003cText\u003e{selected.label}\u003c/Text\u003e\n      \u003c/Flex\u003e\n    )\n  }\n\n  const customCreateItemRender = (value) =\u003e {\n    return (\n      \u003cText\u003e\n        \u003cBox as='span'\u003eCreate\u003c/Box\u003e{' '}\n        \u003cBox as='span' bg='red.300' fontWeight='bold'\u003e\n          \"{value}\"\n        \u003c/Box\u003e\n      \u003c/Text\u003e\n    )\n  }\n\n\n\n  return (\n          \u003cCUIAutoComplete\n            tagStyleProps={{\n              rounded: 'full'\n            }}\n            label=\"Choose preferred work locations\"\n            placeholder=\"Type a Country\"\n            onCreateItem={handleCreateItem}\n            items={pickerItems}\n            itemRenderer={customRender}\n            createItemRenderer={customCreateItemRender}\n            selectedItems={selectedItems}\n            onSelectedItemsChange={(changes) =\u003e\n              handleSelectedItemsChange(changes.selectedItems)\n            }\n          /\u003e\n  );\n}\n\n```\n\n## Props\n\n| Property               | Type     | Required | Decscription                                                                                                                                                     |\n| ---------------------- | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| items                  | Array    | Yes      | An array of the items to be selected within the input field                                                                                                      |\n| placeholder            | string   |          | The placeholder for the input field                                                                                                                              |\n| label                  | string   | Yes      | Input Form Label to describe the activity or process                                                                                                             |\n| highlightItemBg        | string   |          | For accessibility, you can define a custom color for the highlight color when user is typing also accept  props like `yellow.300` based on chakra theme provider |\n| onCreateItem           | Function | Yes      | Function to handle creating new Item                                                                                                                             |\n| optionFilterFunc       | Function |          | You can define a custom Function to handle filter logic                                                                                                          |\n| itemRenderer           | Function |          | Custom Function that can either return a JSX Element or String, in order to control how the list items within the Dropdown is rendered                           |\n| labelStyleProps        | Object   |          | Custom style props based on chakra-ui for labels, Example `{{ bg: 'gray.100', pt: '4'}}                                                                          |\n| inputStyleProps        | Object   |          | Custom style props based on chakra-ui for input field, Example`{{ bg: 'gray.100', pt: '4'}}                                                                      |\n| toggleButtonStyleProps | Object   |          | Custom style props based on chakra-ui for toggle button, Example `{{ bg: 'gray.100', pt: '4'}}                                                                   |\n| tagStyleProps          | Object   |          | Custom style props based on chakra-ui for multi option tags, Example`{{ bg: 'gray.100', pt: '4'}}                                                                |\n| listStyleProps         | Object   |          | Custom style props based on chakra-ui for dropdown list, Example `{{ bg: 'gray.100', pt: '4'}}                                                                   |\n| listItemStyleProps     | Object   |          | Custom style props based on chakra-ui for single list item in dropdown, Example`{{ bg: 'gray.100', pt: '4'}}                                                     |\n| selectedIconProps      | Object   |          | Custom style props based on chakra-ui for the green tick icon in dropdown list, Example `{{ bg: 'gray.100', pt: '4'}}                                            |\n| icon      | Object   |   CheckCircleIcon       | @chakra-ui/icons Icon to be displayed instead of CheckCircleIcon                                            |\n| hideToggleButton      | boolean   |          | Hide the toggle button                                         |\n| disableCreateItem      | boolean   |          | Disable the \"create new\"  list Item. Default is `false`                                             |\n| createItemRenderer      | Function   |          | Custom Function that can either return a JSX Element or String, in order to control how the create new item within the Dropdown is rendered. The input value is passed as the first function parameter, Example: ``` (value) =\u003e `Create ${value}` ```                                            |\n| renderCustomInput         | Function    |       | Custom function to render input from outside chakra-ui-autocomplete. Receives input props for the input element and toggleButtonProps for the toggle button. Can use this to render chakra-ui's ```\u003cInputGroup\u003e```. Example: ```(inputProps) =\u003e (\u003cInputGroup\u003e\u003cInputLeftElement pointerEvents=\"none\" children={\u003cPhoneIcon color=\"gray.300\" /\u003e} /\u003e\u003cInput {...inputProps} /\u003e\u003c/InputGroup\u003e)```\n\n## Todo\n\n- [ ] Add Combobox Support for Single Select [Downshift Combobox](https://downshift.netlify.app/use-combobox)\n- [x] Multi Select Support\n- [x] Feature to Create when not in list\n- [x] Add prop for Items Renderer to enable rendering of React Element\n- [ ] Ability to define `chakra-ui components` that will render in place of `Tags, MenuList, TextInput, Form Label` will check render props or headless UI patterns.\n\n## Contributors\n\n### Code Contributors\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=\"http://kuasha.xyz\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/6187401?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eArafat Zahan\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/koolamusic/chakra-ui-autocomplete/commits?author=kuasha420\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/joaoviana\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/7611706?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJoão Viana\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/koolamusic/chakra-ui-autocomplete/commits?author=joaoviana\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://demah.ir\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/17513392?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHamed Sedighi\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/koolamusic/chakra-ui-autocomplete/commits?author=herol3oy\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://akashsingh.blog\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/9202515?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAkash Singh\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/koolamusic/chakra-ui-autocomplete/commits?author=akash4393\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://ifbmt.info\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/2472115?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAnthony Master\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/koolamusic/chakra-ui-autocomplete/commits?author=amaster507\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/koolamusic/chakra-ui-autocomplete/commits?author=amaster507\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"https://github.com/koolamusic/chakra-ui-autocomplete/commits?author=amaster507\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://vidur.io\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/587136?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVidur Murali\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/koolamusic/chakra-ui-autocomplete/commits?author=vyder\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/it-nalon\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/8491676?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMarco Nalon\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/koolamusic/chakra-ui-autocomplete/commits?author=it-nalon\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"https://github.com/koolamusic/chakra-ui-autocomplete/commits?author=it-nalon\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/koolamusic/chakra-ui-autocomplete/commits?author=it-nalon\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/koolamusic\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/8960757?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eU.M Andrew\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/koolamusic/chakra-ui-autocomplete/commits?author=koolamusic\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/koolamusic/chakra-ui-autocomplete/commits?author=koolamusic\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"https://github.com/koolamusic/chakra-ui-autocomplete/commits?author=koolamusic\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://believeplus.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/67389482?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003esr.cristofher\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/koolamusic/chakra-ui-autocomplete/commits?author=srcristofher\" title=\"Documentation\"\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 exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\u003ca href=\"https://github.com/undefined/undefined/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/chakra-ui-autocomplete/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\n\n### Financial Contributors\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/chakra-ui-autocomplete/contribute)]\n\n#### Individuals\n\n\u003ca href=\"https://opencollective.com/chakra-ui-autocomplete\"\u003e\u003cimg src=\"https://opencollective.com/chakra-ui-autocomplete/individuals.svg?width=890\"\u003e\u003c/a\u003e\n\n#### Organizations\n\nSupport this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/chakra-ui-autocomplete/contribute)]\n\n\u003ca href=\"https://opencollective.com/chakra-ui-autocomplete/organization/0/website\"\u003e\u003cimg src=\"https://opencollective.com/chakra-ui-autocomplete/organization/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/chakra-ui-autocomplete/organization/1/website\"\u003e\u003cimg src=\"https://opencollective.com/chakra-ui-autocomplete/organization/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/chakra-ui-autocomplete/organization/2/website\"\u003e\u003cimg src=\"https://opencollective.com/chakra-ui-autocomplete/organization/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/chakra-ui-autocomplete/organization/3/website\"\u003e\u003cimg src=\"https://opencollective.com/chakra-ui-autocomplete/organization/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/chakra-ui-autocomplete/organization/4/website\"\u003e\u003cimg src=\"https://opencollective.com/chakra-ui-autocomplete/organization/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/chakra-ui-autocomplete/organization/5/website\"\u003e\u003cimg src=\"https://opencollective.com/chakra-ui-autocomplete/organization/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/chakra-ui-autocomplete/organization/6/website\"\u003e\u003cimg src=\"https://opencollective.com/chakra-ui-autocomplete/organization/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/chakra-ui-autocomplete/organization/7/website\"\u003e\u003cimg src=\"https://opencollective.com/chakra-ui-autocomplete/organization/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/chakra-ui-autocomplete/organization/8/website\"\u003e\u003cimg src=\"https://opencollective.com/chakra-ui-autocomplete/organization/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/chakra-ui-autocomplete/organization/9/website\"\u003e\u003cimg src=\"https://opencollective.com/chakra-ui-autocomplete/organization/9/avatar.svg\"\u003e\u003c/a\u003e\n\n## License\n\nMIT © [koolamusic](https://github.com/koolamusic)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoolamusic%2Fchakra-ui-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkoolamusic%2Fchakra-ui-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoolamusic%2Fchakra-ui-autocomplete/lists"}