JavaScript Element ariaMultiSelectable Property

What You’ll Learn

Element.ariaMultiSelectable is an instance property that reflects the aria-multiselectable attribute. Learn the true and false tokens, how multi-select listboxes work with aria-selected, and how to get or set the property from JavaScript—with five examples and try-it labs.

Introduction

Some widgets let you pick only one item (a radio group or single-select list). Others let you pick several at once (a multi-select listbox or tag picker). Assistive technologies need to know which pattern they are in.

aria-multiselectable carries that signal on the container. ariaMultiSelectable is the JavaScript reflection of that attribute.

const el = document.getElementById("listbox1");
console.log(el.ariaMultiSelectable); // "true"
el.ariaMultiSelectable = "false";

Understanding the Property

MDN: the ariaMultiSelectable property of the Element interface reflects the value of the aria-multiselectable attribute, which indicates that the user may select more than one item from the current selectable descendants.

• Reflected attribute — mirrors aria-multiselectable.
• Get / set — readable and writable string.
• Two tokens — true, false.
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaMultiSelectable

Value

A string with one of the following values:

📋 MDN Example Shape

MDN starts with a listbox marked aria-multiselectable="true", then updates it to "false":

<div
  role="listbox"
  tabindex="0"
  id="listbox1"
  aria-multiselectable="true"
  aria-labelledby="listbox1label"
  aria-activedescendant="listbox1-1"
>
  <div role="option" id="listbox1-1" class="selected" aria-selected="true">Green</div>
  <div role="option" id="listbox1-2">Orange</div>
  <div role="option" id="listbox1-3">Red</div>
</div>

let el = document.getElementById("listbox1");
console.log(el.ariaMultiSelectable); // "true"
el.ariaMultiSelectable = "false";
console.log(el.ariaMultiSelectable); // "false"

Examples Gallery

Examples follow MDN Element: ariaMultiSelectable. Labs use a listbox so you can safely read and write the property.

const el = document.getElementById("listbox1");
console.log(el.ariaMultiSelectable);

// HTML includes: role="listbox" aria-multiselectable="true"

true

let el = document.getElementById("listbox1");
console.log(el.ariaMultiSelectable); // "true"
el.ariaMultiSelectable = "false";
console.log(el.ariaMultiSelectable); // "false"

true
false

const listbox = document.createElement("div");
listbox.setAttribute("role", "listbox");
listbox.setAttribute("aria-label", "Colors");
listbox.tabIndex = 0;
document.body.appendChild(listbox);

listbox.ariaMultiSelectable = "true";
console.log({
  ariaMultiSelectable: listbox.ariaMultiSelectable,
  attr: listbox.getAttribute("aria-multiselectable")
});

{
  "ariaMultiSelectable": "true",
  "attr": "true"
}

const el = document.createElement("div");
el.setAttribute("role", "listbox");
el.setAttribute("aria-multiselectable", "true");
el.setAttribute("aria-label", "Colors");
document.body.appendChild(el);

el.ariaMultiSelectable = "false";
console.log({
  fromProperty: el.ariaMultiSelectable,
  fromAttribute: el.getAttribute("aria-multiselectable"),
  same: el.ariaMultiSelectable === el.getAttribute("aria-multiselectable")
});

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

console.log({
  supported: "ariaMultiSelectable" in Element.prototype,
  allowed: ["true", "false"],
  tip: "Prefer select multiple when possible; use aria-selected on options",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "allowed": ["true", "false"],
  "tip": "Prefer select multiple when possible; use aria-selected on options",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Custom multi-select listboxes and tag pickers.
• Grids or trees that allow selecting several rows or nodes.
• Switching a widget between single-select and multi-select modes.
• Keeping keyboard selection patterns aligned with AT expectations.
• Keeping script and markup aligned without manual setAttribute.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Prefer native HTML multi-select controls when possible (MDN).
• Set the property on the container; use aria-selected on options.
• Related: ariaOrientation, ariaLabel, EventTarget, JavaScript hub.

💡 Best Practices