Advanced

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 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 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.

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.