Advanced

Option overrides

Inject or compute options client-side, per suggestion type. Useful when an option list depends on the user's typed input (e.g. dollar amounts, account names) or comes from your own state.

<AIAutocomplete
  optionOverrides={{
    account: () => [
      { text: "Savings", is_tappable: true, kind: null },
      { text: "Checking", is_tappable: true, kind: null },
    ],
    value: (query) => {
      const digits = query.replace(/\D/g, "");
      if (!digits) return [{ text: "$100", is_tappable: true, kind: null }];
      return [{ text: `$${digits}`, is_tappable: true, kind: null }];
    },
  }}
  onSubmit={handleSubmit}
/>;

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.