# Advanced | React AI Autocomplete Docs

> For the complete documentation index, see [llms.txt](https://ai-autocomplete.com/llms.txt). A markdown version of any page on this site is available by appending `.md` to its URL path — the homepage is at `/index.md`.

Advanced guide for integrating the AI Autocomplete SDK with React. Code examples, setup, and API reference.

Source: https://ai-autocomplete.com/docs/react/advanced

---

Patterns for power users — dynamic options, fully controlled state, and accessibility.

## Inject field options at runtime

Fields whose options come from your own data (a location search, a customer list, live inventory) have their own guide. [Field Injection](https://ai-autocomplete.com/docs/react/field-injection) walks through marking a field as injected in Edit Logic and wiring optionOverrides to your endpoint.

## Personalize suggestions per user

Suggestions can be tailored to each user with what your app already knows about them: a profile, saved preferences, recent activity. [Personalization](https://ai-autocomplete.com/docs/react/personalization) covers what to send, how to keep it current, the size cap, and what stays private.

## Controlled mode

Lift state out of the component when you need to read or push the value from elsewhere — e.g. a wizard, form library, or shared parent.

**controlled.tsx**

```tsx
const [text, setText] = useState("");
const [params, setParams] = useState<CompletedParamState[]>([]);

<AIAutocomplete
  value={text}
  onChange={setText}
  completedParams={params}
  onParamsChange={setParams}
  onSubmit={handleSubmit}
/>;
```

## Accessibility

The component implements the ARIA combobox pattern. Things you should know:

-   The dropdown uses role="listbox" with aria-activedescendant pointing at the highlighted option.
-   Pills are buttons (role="button") and announce as part of the live input.
-   Keyboard: arrow keys navigate, Enter submits, Tab autocompletes, Escape closes the dropdown.