JavaScript Element ariaAutoComplete Property

What You’ll Learn

Element.ariaAutoComplete is an instance property that reflects the aria-autocomplete attribute. Learn the inline, list, both, and none values, how they describe combobox / searchbox / textbox predictions, and how to get or set the property from JavaScript—with five examples and try-it labs.

Introduction

Autocomplete UIs often show a popup list of suggestions, or complete text inline after the caret—or both. Assistive technologies need to know which pattern you use.

That is what aria-autocomplete communicates. The DOM property ariaAutoComplete lets you read and update the same value from JavaScript.

const input = document.getElementById("animal");
console.log(input.ariaAutoComplete); // e.g. "inline"
input.ariaAutoComplete = "list";

Understanding the Property

MDN: the ariaAutoComplete property of the Element interface reflects the value of the aria-autocomplete attribute, which indicates whether inputting text could trigger display of one or more predictions of the user’s intended value for a combobox, searchbox, or textbox and specifies how predictions would be presented if they were made.

• Reflected attribute — mirrors aria-autocomplete.
• Get / set — readable and writable string.
• Four tokens — inline, list, both, none.
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaAutoComplete

Value

A string with one of the following values:

📋 Combobox + Listbox (MDN Shape)

MDN’s example starts with aria-autocomplete="inline", then updates to "list" for a combobox that opens a listbox popup:

<label for="animal">Animal</label>
<input
  id="animal"
  type="text"
  role="combobox"
  aria-autocomplete="inline"
  aria-controls="animals-listbox"
  aria-expanded="false"
  aria-haspopup="listbox" />
<ul id="animals-listbox" role="listbox" aria-label="Animals">
  <li id="animal-cat" role="option">Cat</li>
  <li id="animal-dog" role="option">Dog</li>
</ul>

Related attributes often used with comboboxes: aria-controls, aria-expanded, aria-haspopup, and sometimes ariaActiveDescendantElement for the highlighted option.

Examples Gallery

Examples follow MDN Element: ariaAutoComplete. Labs use a small combobox input so you can safely read and write the property.

const el = document.getElementById("animal");
console.log(el.ariaAutoComplete);

// HTML includes: aria-autocomplete="inline"

inline

let el = document.getElementById("animal");
console.log(el.ariaAutoComplete); // inline
el.ariaAutoComplete = "list";
console.log(el.ariaAutoComplete); // list

inline
list

const input = document.createElement("input");
input.type = "text";
input.setAttribute("role", "combobox");
document.body.appendChild(input);

input.ariaAutoComplete = "both";
console.log({
  ariaAutoComplete: input.ariaAutoComplete,
  attr: input.getAttribute("aria-autocomplete")
});

{
  "ariaAutoComplete": "both",
  "attr": "both"
}

const el = document.createElement("input");
el.setAttribute("aria-autocomplete", "inline");
document.body.appendChild(el);

el.ariaAutoComplete = "none";
console.log({
  fromProperty: el.ariaAutoComplete,
  fromAttribute: el.getAttribute("aria-autocomplete"),
  same: el.ariaAutoComplete === el.getAttribute("aria-autocomplete")
});

{
  "fromProperty": "none",
  "fromAttribute": "none",
  "same": true
}

console.log({
  supported: "ariaAutoComplete" in Element.prototype,
  allowed: ["inline", "list", "both", "none"],
  tip: "Use \"list\" for combobox + listbox popup (MDN)",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "allowed": ["inline", "list", "both", "none"],
  "tip": "Use \"list\" for combobox + listbox popup (MDN)",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Combobox widgets with a listbox of suggestions.
• Search fields that complete text inline after the caret.
• Switching prediction mode when the UI changes (list vs inline).
• Keeping script and markup aligned without manual setAttribute.
• Documenting ARIA autocomplete behavior for accessibility reviews.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Values are strings: inline, list, both, none.
• Different from HTML autocomplete (autofill).
• Related: ariaBrailleLabel, ariaAtomic, EventTarget, JavaScript hub.

💡 Best Practices