[{"data":1,"prerenderedAt":239},["ShallowReactive",2],{"navigation":3,"\u002Fdocs\u002Fcomponents\u002Fautocomplete":66,"surround-\u002Fdocs\u002Fcomponents\u002Fautocomplete":236},[4],{"title":5,"path":6,"stem":7,"children":8,"page":14},"Docs","\u002Fdocs","docs",[9,16,20,60],{"title":10,"path":11,"stem":12,"navigation":13,"new":14,"soon":14,"hide":14,"type":15,"children":-1},"Introduction","\u002Fdocs\u002Fintroduction","docs\u002F01.introduction",null,false,"page",{"title":17,"path":18,"stem":19,"navigation":13,"new":14,"soon":14,"hide":14,"type":15,"children":-1},"Installation","\u002Fdocs\u002Finstallation","docs\u002F02.installation",{"title":21,"path":22,"stem":23,"children":24,"navigation":13,"new":14,"soon":14,"hide":14,"type":59},"Components","\u002Fdocs\u002Fcomponents","docs\u002F03.components",[25,31,35,39,43,47,51,55],{"title":26,"path":27,"stem":28,"navigation":13,"new":29,"soon":14,"hide":14,"type":30,"children":-1},"Autocomplete","\u002Fdocs\u002Fcomponents\u002Fautocomplete","docs\u002F03.components\u002F01.autocomplete",true,"component",{"title":32,"path":33,"stem":34,"navigation":13,"new":29,"soon":14,"hide":14,"type":30,"children":-1},"Show More","\u002Fdocs\u002Fcomponents\u002Fshow-more","docs\u002F03.components\u002F02.show-more",{"title":36,"path":37,"stem":38,"navigation":13,"new":29,"soon":14,"hide":14,"type":30,"children":-1},"Typography","\u002Fdocs\u002Fcomponents\u002Ftypography","docs\u002F03.components\u002F03.typography",{"title":40,"path":41,"stem":42,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Code Block","\u002Fdocs\u002Fcomponents\u002Fcode-block","docs\u002F03.components\u002Fcode-block",{"title":44,"path":45,"stem":46,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Code Snippet","\u002Fdocs\u002Fcomponents\u002Fcode-snippet","docs\u002F03.components\u002Fcode-snippet",{"title":48,"path":49,"stem":50,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Guided Tour","\u002Fdocs\u002Fcomponents\u002Fguided-tour","docs\u002F03.components\u002Fguided-tour",{"title":52,"path":53,"stem":54,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Meter","\u002Fdocs\u002Fcomponents\u002Fmeter","docs\u002F03.components\u002Fmeter",{"title":56,"path":57,"stem":58,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Star Rating","\u002Fdocs\u002Fcomponents\u002Fstar-rating","docs\u002F03.components\u002Fstar-rating","group",{"title":61,"path":62,"stem":63,"children":64,"navigation":13,"new":14,"soon":29,"hide":29,"type":59},"Animations","\u002Fdocs\u002Fanimation","docs\u002F04.animation\u002Findex",[65],{"title":61,"path":62,"stem":63,"navigation":13,"new":14,"soon":29,"hide":29,"type":15,"children":-1},{"id":67,"title":26,"body":68,"component":29,"description":226,"extension":227,"hide":14,"lastUpdated":228,"links":229,"meta":232,"navigation":13,"new":29,"path":27,"rawbody":233,"seo":234,"soon":14,"stem":28,"__hash__":235},"content\u002Fdocs\u002F03.components\u002F01.autocomplete.md",{"type":69,"value":70,"toc":218},"minimark",[71,75,79,141,145,155,160,167],[72,73],"component-preview",{"name":74},"AutocompleteDemo",[76,77,17],"h2",{"id":78},"installation",[80,81,82,99,113],"code-tabs",{},[83,84,85,93],"doc-tabs-list",{},[86,87,89],"doc-tabs-trigger",{"value":88},"cli",[90,91,92],"p",{},"CLI",[86,94,96],{"value":95},"manual",[90,97,98],{},"Manual",[100,101,102],"doc-tabs-content",{"value":88},[103,104,110],"pre",{"className":105,"code":107,"language":108,"meta":109},[106],"language-bash","npx sulaf@latest add autocomplete\n","bash","",[111,112,107],"code",{"__ignoreMap":109},[100,114,115],{"value":95},[116,117,118,124,130,136],"steps",{},[119,120,121],"step",{},[90,122,123],{},"Install the following dependencies:",[103,125,128],{"className":126,"code":127,"language":108,"meta":109},[106],"npm install reka-ui @vueuse\u002Fcore lucide-vue-next\n",[111,129,127],{"__ignoreMap":109},[119,131,132],{},[133,134],"manual-install",{"folder":135},"autocomplete",[119,137,138],{},[90,139,140],{},"Update the import paths to match your project setup.",[76,142,144],{"id":143},"api-reference","API Reference",[90,146,147,148,150,151,154],{},"The ",[111,149,26],{}," component uses Reka UI's ",[111,152,153],{},"Combobox"," primitive under the hood, but introduces a few custom abstractions, models, and styling defaults.",[156,157,159],"h3",{"id":158},"autocomplete-root","Autocomplete (Root)",[90,161,162,163,166],{},"The root component extends all ",[111,164,165],{},"ComboboxRoot"," properties and adds semantic handling for the search input state.",[168,169,170,190],"table",{},[171,172,173],"thead",{},[174,175,176,181,184,187],"tr",{},[177,178,180],"th",{"align":179},"left","Prop",[177,182,183],{"align":179},"Type",[177,185,186],{"align":179},"Default",[177,188,189],{"align":179},"Description",[191,192,193],"tbody",{},[174,194,195,201,206,211],{},[196,197,198],"td",{"align":179},[111,199,200],{},"v-model:search-term",[196,202,203],{"align":179},[111,204,205],{},"string",[196,207,208],{"align":179},[111,209,210],{},"''",[196,212,213,214,217],{"align":179},"Exposes the direct value of the ",[111,215,216],{},"AutocompleteInput",". By binding to this, you can filter your own item lists dynamically outside the component.",{"title":109,"searchDepth":219,"depth":219,"links":220},2,[221,222],{"id":78,"depth":219,"text":17},{"id":143,"depth":219,"text":144,"children":223},[224],{"id":158,"depth":225,"text":159},3,"A searchable selection component with filtering capabilities, built on top of Reka UI Combobox.","md","2026-04-14T18:14:16.944Z",{"doc":230,"api":231},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Fcombobox","https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Fcombobox#api-reference",{},"---\ntitle: Autocomplete\ndescription: A searchable selection component with filtering capabilities, built on top of Reka UI Combobox.\nnew: true\ncomponent: true\nlinks:\n  doc: https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Fcombobox\n  api: https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Fcombobox#api-reference\n---\n\n::component-preview\n---\nname: AutocompleteDemo\n---\n::\n\n## Installation\n\n::code-tabs\n\n  ::doc-tabs-list\n\n    ::doc-tabs-trigger{value=\"cli\"}\n    CLI\n    ::\n\n    ::doc-tabs-trigger{value=\"manual\"}\n    Manual\n    ::\n\n  ::\n\n  ::doc-tabs-content{value=\"cli\"}\n  ```bash\n  npx sulaf@latest add autocomplete\n  ```\n  ::\n\n  ::doc-tabs-content{value=\"manual\"}\n\n    ::steps\n\n      ::step\n      Install the following dependencies:\n      ::\n\n      ```bash\n      npm install reka-ui @vueuse\u002Fcore lucide-vue-next\n      ```\n\n      ::step\n        ::manual-install{folder=\"autocomplete\"}\n        ::\n      ::\n\n      ::step\n      Update the import paths to match your project setup.\n      ::\n\n    ::\n\n  ::\n\n::\n\n## API Reference\n\nThe `Autocomplete` component uses Reka UI's `Combobox` primitive under the hood, but introduces a few custom abstractions, models, and styling defaults.\n\n### Autocomplete (Root)\n\nThe root component extends all `ComboboxRoot` properties and adds semantic handling for the search input state.\n\n| Prop                  | Type     | Default | Description                                                                                                                                    |\n| :-------------------- | :------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------- |\n| `v-model:search-term` | `string` | `''`    | Exposes the direct value of the `AutocompleteInput`. By binding to this, you can filter your own item lists dynamically outside the component. |\n",{"title":26,"description":226},"UevUs1YwNEi2p3YRxEQzx-jYaZ5ZN_t9iABAwe41uf0",[237,238],{"title":21,"path":22,"stem":23,"children":-1},{"title":32,"path":33,"stem":34,"children":-1},1776190579459]