From c56661af5c203adaad4e9e5fb27117f597d04f94 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Tue, 9 Dec 2025 11:37:16 -0500
Subject: [PATCH 1/7] docs: add aria select page

---
 src/dev-app/BUILD.bazel                  |  1 +
 src/dev-app/aria-select/BUILD.bazel      | 15 +++++++++++++++
 src/dev-app/aria-select/select-demo.css  |  0
 src/dev-app/aria-select/select-demo.html |  0
 src/dev-app/aria-select/select-demo.ts   | 17 +++++++++++++++++
 src/dev-app/dev-app/dev-app-layout.ts    |  1 +
 src/dev-app/routes.ts                    |  4 ++++
 7 files changed, 38 insertions(+)
 create mode 100644 src/dev-app/aria-select/BUILD.bazel
 create mode 100644 src/dev-app/aria-select/select-demo.css
 create mode 100644 src/dev-app/aria-select/select-demo.html
 create mode 100644 src/dev-app/aria-select/select-demo.ts

diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel
index faf459be208c..b18b11e22ea1 100644
--- a/src/dev-app/BUILD.bazel
+++ b/src/dev-app/BUILD.bazel
@@ -32,6 +32,7 @@ ng_project(
         "//src/dev-app/aria-listbox",
         "//src/dev-app/aria-menu",
         "//src/dev-app/aria-menubar",
+        "//src/dev-app/aria-select",
         "//src/dev-app/aria-tabs",
         "//src/dev-app/aria-toolbar",
         "//src/dev-app/aria-tree",
diff --git a/src/dev-app/aria-select/BUILD.bazel b/src/dev-app/aria-select/BUILD.bazel
new file mode 100644
index 000000000000..bf87056b28c0
--- /dev/null
+++ b/src/dev-app/aria-select/BUILD.bazel
@@ -0,0 +1,15 @@
+load("//tools:defaults.bzl", "ng_project")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_project(
+    name = "aria-select",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "select-demo.html",
+        ":select-demo.css",
+    ],
+    deps = [
+        "//:node_modules/@angular/core",
+    ],
+)
diff --git a/src/dev-app/aria-select/select-demo.css b/src/dev-app/aria-select/select-demo.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/dev-app/aria-select/select-demo.html b/src/dev-app/aria-select/select-demo.html
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/dev-app/aria-select/select-demo.ts b/src/dev-app/aria-select/select-demo.ts
new file mode 100644
index 000000000000..ed04f794fc6c
--- /dev/null
+++ b/src/dev-app/aria-select/select-demo.ts
@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  templateUrl: 'select-demo.html',
+  styleUrl: 'select-demo.css',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectDemo {}
diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts
index fa06844c3584..8e552a3d0727 100644
--- a/src/dev-app/dev-app/dev-app-layout.ts
+++ b/src/dev-app/dev-app/dev-app-layout.ts
@@ -69,6 +69,7 @@ export class DevAppLayout {
     {name: 'Aria Listbox', route: '/aria-listbox'},
     {name: 'Aria Menu', route: '/aria-menu'},
     {name: 'Aria Menubar', route: '/aria-menubar'},
+    {name: 'Aria Select', route: '/aria-select'},
     {name: 'Aria Tabs', route: '/aria-tabs'},
     {name: 'Aria Toolbar', route: '/aria-toolbar'},
     {name: 'Aria Tree', route: '/aria-tree'},
diff --git a/src/dev-app/routes.ts b/src/dev-app/routes.ts
index 03fefd5abd7c..2fab9c4af821 100644
--- a/src/dev-app/routes.ts
+++ b/src/dev-app/routes.ts
@@ -44,6 +44,10 @@ export const DEV_APP_ROUTES: Routes = [
     path: 'aria-combobox',
     loadComponent: () => import('./aria-combobox/combobox-demo').then(m => m.ComboboxDemo),
   },
+  {
+    path: 'aria-select',
+    loadComponent: () => import('./aria-select/select-demo').then(m => m.SelectDemo),
+  },
   {
     path: 'aria-grid',
     loadComponent: () => import('./aria-grid/grid-demo').then(m => m.GridDemo),

From a3633bacbcbb38ebe5995f724840beac5718fca3 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Tue, 9 Dec 2025 12:29:23 -0500
Subject: [PATCH 2/7] docs: add basic aria select example

---
 .../aria/select/BUILD.bazel                   |  27 ++++
 src/components-examples/aria/select/index.ts  |   1 +
 .../aria/select/select.css                    | 135 ++++++++++++++++++
 .../aria/select/select/select-example.html    |  35 +++++
 .../aria/select/select/select-example.ts      |  66 +++++++++
 src/dev-app/aria-select/BUILD.bazel           |   1 +
 src/dev-app/aria-select/select-demo.html      |   6 +
 src/dev-app/aria-select/select-demo.ts        |   2 +
 8 files changed, 273 insertions(+)
 create mode 100644 src/components-examples/aria/select/BUILD.bazel
 create mode 100644 src/components-examples/aria/select/index.ts
 create mode 100644 src/components-examples/aria/select/select.css
 create mode 100644 src/components-examples/aria/select/select/select-example.html
 create mode 100644 src/components-examples/aria/select/select/select-example.ts

diff --git a/src/components-examples/aria/select/BUILD.bazel b/src/components-examples/aria/select/BUILD.bazel
new file mode 100644
index 000000000000..cf82f9bf6ef9
--- /dev/null
+++ b/src/components-examples/aria/select/BUILD.bazel
@@ -0,0 +1,27 @@
+load("//tools:defaults.bzl", "ng_project")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_project(
+    name = "select",
+    srcs = glob(["**/*.ts"]),
+    assets = glob([
+        "**/*.html",
+        "**/*.css",
+    ]),
+    deps = [
+        "//:node_modules/@angular/core",
+        "//src/aria/combobox",
+        "//src/aria/listbox",
+        "//src/cdk/overlay",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob([
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
+    ]),
+)
diff --git a/src/components-examples/aria/select/index.ts b/src/components-examples/aria/select/index.ts
new file mode 100644
index 000000000000..e7c313195a60
--- /dev/null
+++ b/src/components-examples/aria/select/index.ts
@@ -0,0 +1 @@
+export {SelectExample} from './select/select-example';
diff --git a/src/components-examples/aria/select/select.css b/src/components-examples/aria/select/select.css
new file mode 100644
index 000000000000..cbcaadbc9440
--- /dev/null
+++ b/src/components-examples/aria/select/select.css
@@ -0,0 +1,135 @@
+.example-select {
+  width: fit-content;
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--mat-sys-outline);
+  border-radius: var(--mat-sys-corner-extra-small);
+}
+
+.example-select:has([ngComboboxInput][aria-disabled='true']) {
+  opacity: 0.7;
+  background-color: var(--mat-sys-surface-dim);
+}
+
+.example-select:focus-within {
+  outline-offset: -2px;
+  outline: 2px solid var(--mat-sys-primary);
+}
+
+.example-arrow,
+.example-select-value {
+  position: absolute;
+  pointer-events: none;
+}
+
+.example-select-value {
+  display: flex;
+  gap: 1rem;
+  left: 1rem;
+  width: calc(100% - 4rem);
+}
+
+.example-select-label {
+  text-overflow: ellipsis;
+  text-wrap-mode: nowrap;
+  overflow: hidden;
+}
+
+.example-arrow,
+.example-select-icon {
+  font-size: 1.25rem;
+  opacity: 0.875;
+}
+
+.example-arrow {
+  right: 1rem;
+  transition: transform 0.2s ease-in-out;
+}
+
+[ngComboboxInput] {
+  cursor: pointer;
+  padding: 0.7rem 3rem;
+  opacity: 0;
+}
+
+[ngComboboxInput][aria-disabled='true'] {
+  cursor: default;
+}
+
+[ngComboboxInput][aria-expanded='true'] + .example-arrow {
+  transform: rotate(180deg);
+}
+
+[ngCombobox]:has([aria-expanded='false']) .example-popup {
+  display: none;
+}
+
+.example-popup {
+  width: 100%;
+  margin-top: 2px;
+  padding: 0.1rem;
+  max-height: 11rem;
+  border-radius: var(--mat-sys-corner-extra-small);
+  background-color: var(--mat-sys-surface);
+  border: 1px solid var(--mat-sys-outline);
+}
+
+.example-no-results {
+  padding: 1rem;
+}
+
+[ngListbox] {
+  gap: 2px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+}
+
+[ngOption] {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  margin: 1px;
+  gap: 1rem;
+  padding: 0.7rem 1rem;
+  border-radius: var(--mat-sys-corner-extra-small);
+}
+
+[ngOption][aria-disabled='true'] {
+  cursor: default;
+  opacity: 0.5;
+  background-color: var(--mat-sys-surface-dim);
+}
+
+[ngOption]:hover {
+  background-color: color-mix(in srgb, var(--mat-sys-outline) 15%, transparent);
+}
+
+[ngOption][data-active='true'] {
+  outline-offset: -2px;
+  outline: 2px solid var(--mat-sys-primary);
+}
+
+[ngOption][aria-selected='true'] {
+  color: var(--mat-sys-primary);
+  background-color: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);
+}
+
+[ngOption]:not([aria-selected='true']) .example-option-check {
+  display: none;
+}
+
+.example-option-text {
+  flex: 1;
+}
+
+.example-option-icon {
+  font-size: 1.25rem;
+}
+
+.example-option-check {
+  font-size: 1rem;
+}
diff --git a/src/components-examples/aria/select/select/select-example.html b/src/components-examples/aria/select/select/select-example.html
new file mode 100644
index 000000000000..9dfd34de9b9f
--- /dev/null
+++ b/src/components-examples/aria/select/select/select-example.html
@@ -0,0 +1,35 @@
+<div ngCombobox readonly>
+  <div #origin class="example-select">
+    <div class="example-select-value">
+      <span class="example-select-icon material-symbols-outlined">{{ value().icon }}</span>
+      <span class="example-select-label">{{ value().label }}</span>
+    </div>
+    <input aria-label="Select a theme" ngComboboxInput [value]="value().label" />
+    <span class="example-arrow material-symbols-outlined">arrow_drop_down</span>
+  </div>
+
+  <ng-template
+    [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
+    [cdkConnectedOverlayOpen]="true"
+  >
+    <ng-template ngComboboxPopupContainer>
+      <div class="example-popup">
+        <div ngListbox [values]="[value()]">
+          @for (item of items; track item.label) {
+            <div ngOption [value]="item" [label]="item.label">
+              <span
+                aria-hidden="true"
+                class="example-option-icon material-symbols-outlined"
+                >{{item.icon}}</span
+              >
+              <span class="example-option-text">{{item.label}}</span>
+              <span aria-hidden="true" class="example-option-check material-symbols-outlined"
+                >check</span
+              >
+            </div>
+          }
+        </div>
+      </div>
+    </ng-template>
+  </ng-template>
+</div>
diff --git a/src/components-examples/aria/select/select/select-example.ts b/src/components-examples/aria/select/select/select-example.ts
new file mode 100644
index 000000000000..9a57cc865e74
--- /dev/null
+++ b/src/components-examples/aria/select/select/select-example.ts
@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxPopup,
+  ComboboxPopupContainer,
+} from '@angular/aria/combobox';
+import {Listbox, Option} from '@angular/aria/listbox';
+import {
+  afterRenderEffect,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  viewChild,
+  viewChildren,
+} from '@angular/core';
+import {OverlayModule} from '@angular/cdk/overlay';
+
+/** @title Aria select example. */
+@Component({
+  selector: 'select-example',
+  templateUrl: 'select-example.html',
+  styleUrl: '../select.css',
+  imports: [
+    Combobox,
+    ComboboxInput,
+    ComboboxPopup,
+    ComboboxPopupContainer,
+    Listbox,
+    Option,
+    OverlayModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectExample {
+  /** The options available in the listbox. */
+  options = viewChildren<Option<{label: string; icon: string}>>(Option);
+
+  /** The combobox listbox popup. */
+  listbox = viewChild<Listbox<{label: string; icon: string}>>(Listbox);
+
+  /** The current value of the select. */
+  value = computed(() => this.listbox()?.values()[0] ?? this.items[1]);
+
+  /** The items available for selection. */
+  items = [
+    {label: 'Light Mode', icon: 'light_mode'},
+    {label: 'Dark Mode', icon: 'dark_mode'},
+    {label: 'System Default', icon: 'settings'},
+  ];
+
+  constructor() {
+    // Scrolls to the active item when the active option changes.
+    afterRenderEffect(() => {
+      const option = this.options().find(opt => opt.active());
+      option?.element.scrollIntoView({block: 'nearest'});
+    });
+  }
+}
diff --git a/src/dev-app/aria-select/BUILD.bazel b/src/dev-app/aria-select/BUILD.bazel
index bf87056b28c0..8e65d8720b89 100644
--- a/src/dev-app/aria-select/BUILD.bazel
+++ b/src/dev-app/aria-select/BUILD.bazel
@@ -11,5 +11,6 @@ ng_project(
     ],
     deps = [
         "//:node_modules/@angular/core",
+        "//src/components-examples/aria/select",
     ],
 )
diff --git a/src/dev-app/aria-select/select-demo.html b/src/dev-app/aria-select/select-demo.html
index e69de29bb2d1..96ff85af1469 100644
--- a/src/dev-app/aria-select/select-demo.html
+++ b/src/dev-app/aria-select/select-demo.html
@@ -0,0 +1,6 @@
+<div class="demo-container">
+  <div class="example-container">
+    <h2>Select Example</h2>
+    <select-example></select-example>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/dev-app/aria-select/select-demo.ts b/src/dev-app/aria-select/select-demo.ts
index ed04f794fc6c..da1fad22da00 100644
--- a/src/dev-app/aria-select/select-demo.ts
+++ b/src/dev-app/aria-select/select-demo.ts
@@ -7,11 +7,13 @@
  */
 
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+import {SelectExample} from '@angular/components-examples/aria/select';
 
 @Component({
   templateUrl: 'select-demo.html',
   styleUrl: 'select-demo.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [SelectExample],
 })
 export class SelectDemo {}

From c9eaabdc972288d989203c334e6ac88a9f631102 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Tue, 9 Dec 2025 14:18:02 -0500
Subject: [PATCH 3/7] docs: add aria multiselect example

---
 src/components-examples/aria/select/index.ts  |  1 +
 .../select-multi/select-multi-example.html    | 27 +++++++
 .../select-multi/select-multi-example.ts      | 74 +++++++++++++++++++
 src/dev-app/aria-select/select-demo.html      |  7 +-
 src/dev-app/aria-select/select-demo.ts        |  4 +-
 5 files changed, 110 insertions(+), 3 deletions(-)
 create mode 100644 src/components-examples/aria/select/select-multi/select-multi-example.html
 create mode 100644 src/components-examples/aria/select/select-multi/select-multi-example.ts

diff --git a/src/components-examples/aria/select/index.ts b/src/components-examples/aria/select/index.ts
index e7c313195a60..06af22f68125 100644
--- a/src/components-examples/aria/select/index.ts
+++ b/src/components-examples/aria/select/index.ts
@@ -1 +1,2 @@
+export {SelectMultiExample} from './select-multi/select-multi-example';
 export {SelectExample} from './select/select-example';
diff --git a/src/components-examples/aria/select/select-multi/select-multi-example.html b/src/components-examples/aria/select/select-multi/select-multi-example.html
new file mode 100644
index 000000000000..29e40ca53586
--- /dev/null
+++ b/src/components-examples/aria/select/select-multi/select-multi-example.html
@@ -0,0 +1,27 @@
+<div ngCombobox readonly>
+  <div #origin class="example-select">
+    <div class="example-select-value">
+      <span class="example-select-label">{{ displayValue() }}</span>
+    </div>
+    <input aria-label="Select a day of the week" ngComboboxInput />
+    <span class="example-arrow material-symbols-outlined">arrow_drop_down</span>
+  </div>
+
+  <ng-template
+    [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
+    [cdkConnectedOverlayOpen]="true"
+  >
+    <ng-template ngComboboxPopupContainer>
+      <div class="example-popup">
+        <div ngListbox multi>
+          @for (item of items; track item) {
+            <div ngOption [value]="item" [label]="item">
+              <span class="example-option-text">{{item}}</span>
+              <span aria-hidden="true" class="example-option-check material-symbols-outlined">check</span>
+            </div>
+          }
+        </div>
+      </div>
+    </ng-template>
+  </ng-template>
+</div>
diff --git a/src/components-examples/aria/select/select-multi/select-multi-example.ts b/src/components-examples/aria/select/select-multi/select-multi-example.ts
new file mode 100644
index 000000000000..8d553c4a84ac
--- /dev/null
+++ b/src/components-examples/aria/select/select-multi/select-multi-example.ts
@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxPopup,
+  ComboboxPopupContainer,
+} from '@angular/aria/combobox';
+import {Listbox, Option} from '@angular/aria/listbox';
+import {
+  afterRenderEffect,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  viewChild,
+  viewChildren,
+} from '@angular/core';
+import {OverlayModule} from '@angular/cdk/overlay';
+
+/** @title Aria multiselect example. */
+@Component({
+  selector: 'select-multi-example',
+  templateUrl: 'select-multi-example.html',
+  styleUrl: '../select.css',
+  imports: [
+    Combobox,
+    ComboboxInput,
+    ComboboxPopup,
+    ComboboxPopupContainer,
+    Listbox,
+    Option,
+    OverlayModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectMultiExample {
+  /** The options available in the listbox. */
+  options = viewChildren<Option<string>>(Option);
+
+  /** The combobox listbox popup. */
+  listbox = viewChild<Listbox<string>>(Listbox);
+
+  /** The visible label displayed to the user. */
+  displayValue = computed(() => {
+    const values = this.listbox()?.values();
+
+    if (!values?.length) {
+      return 'Select a day';
+    }
+
+    if (values.length <= 2) {
+      return values.join(', ');
+    }
+
+    return `${values[0]} + ${values.length - 1} more`;
+  });
+
+  /** The items available for selection. */
+  items = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
+  constructor() {
+    // Scrolls to the active item when the active option changes.
+    afterRenderEffect(() => {
+      const option = this.options().find(opt => opt.active());
+      option?.element.scrollIntoView({block: 'nearest'});
+    });
+  }
+}
diff --git a/src/dev-app/aria-select/select-demo.html b/src/dev-app/aria-select/select-demo.html
index 96ff85af1469..bd41d26edb61 100644
--- a/src/dev-app/aria-select/select-demo.html
+++ b/src/dev-app/aria-select/select-demo.html
@@ -3,4 +3,9 @@
     <h2>Select Example</h2>
     <select-example></select-example>
   </div>
-</div>
\ No newline at end of file
+
+  <div class="example-container">
+    <h2>Multiselect Example</h2>
+    <select-multi-example></select-multi-example>
+  </div>
+</div>
diff --git a/src/dev-app/aria-select/select-demo.ts b/src/dev-app/aria-select/select-demo.ts
index da1fad22da00..6253c848a833 100644
--- a/src/dev-app/aria-select/select-demo.ts
+++ b/src/dev-app/aria-select/select-demo.ts
@@ -7,13 +7,13 @@
  */
 
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
-import {SelectExample} from '@angular/components-examples/aria/select';
+import {SelectMultiExample, SelectExample} from '@angular/components-examples/aria/select';
 
 @Component({
   templateUrl: 'select-demo.html',
   styleUrl: 'select-demo.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [SelectExample],
+  imports: [SelectMultiExample, SelectExample],
 })
 export class SelectDemo {}

From 298e19c3dec8a68270265fd49052d7fd956bb915 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Tue, 9 Dec 2025 15:18:39 -0500
Subject: [PATCH 4/7] docs: add aria select disabled example

---
 src/components-examples/aria/select/index.ts  |  1 +
 .../select-disabled-example.html              | 28 ++++++++++++++
 .../select-disabled-example.ts                | 38 +++++++++++++++++++
 src/dev-app/aria-select/select-demo.html      |  5 +++
 src/dev-app/aria-select/select-demo.ts        |  8 +++-
 5 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 src/components-examples/aria/select/select-disabled/select-disabled-example.html
 create mode 100644 src/components-examples/aria/select/select-disabled/select-disabled-example.ts

diff --git a/src/components-examples/aria/select/index.ts b/src/components-examples/aria/select/index.ts
index 06af22f68125..2ceef481d338 100644
--- a/src/components-examples/aria/select/index.ts
+++ b/src/components-examples/aria/select/index.ts
@@ -1,2 +1,3 @@
+export {SelectDisabledExample} from './select-disabled/select-disabled-example';
 export {SelectMultiExample} from './select-multi/select-multi-example';
 export {SelectExample} from './select/select-example';
diff --git a/src/components-examples/aria/select/select-disabled/select-disabled-example.html b/src/components-examples/aria/select/select-disabled/select-disabled-example.html
new file mode 100644
index 000000000000..a64296a5d06d
--- /dev/null
+++ b/src/components-examples/aria/select/select-disabled/select-disabled-example.html
@@ -0,0 +1,28 @@
+<div ngCombobox readonly disabled>
+  <div #origin class="example-select">
+    <div class="example-select-value">
+      <span class="example-select-label">Select an option</span>
+    </div>
+    <input aria-label="Select an option" ngComboboxInput />
+    <span class="example-arrow material-symbols-outlined">arrow_drop_down</span>
+  </div>
+
+  <ng-template
+    [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
+    [cdkConnectedOverlayOpen]="true"
+  >
+    <ng-template ngComboboxPopupContainer>
+      <div class="example-popup">
+        <div ngListbox>
+          @for (item of items; track item) {
+            <div ngOption [value]="item" [label]="item">
+              <span aria-hidden="true" class="example-option-icon material-symbols-outlined">{{item}}</span>
+              <span class="example-option-text">{{item}}</span>
+              <span aria-hidden="true" class="example-option-check material-symbols-outlined">check</span>
+            </div>
+          }
+        </div>
+      </div>
+    </ng-template>
+  </ng-template>
+</div>
diff --git a/src/components-examples/aria/select/select-disabled/select-disabled-example.ts b/src/components-examples/aria/select/select-disabled/select-disabled-example.ts
new file mode 100644
index 000000000000..aacc40f17b4d
--- /dev/null
+++ b/src/components-examples/aria/select/select-disabled/select-disabled-example.ts
@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxPopup,
+  ComboboxPopupContainer,
+} from '@angular/aria/combobox';
+import {Listbox, Option} from '@angular/aria/listbox';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {OverlayModule} from '@angular/cdk/overlay';
+
+/** @title Aria select disabled example. */
+@Component({
+  selector: 'select-disabled-example',
+  templateUrl: 'select-disabled-example.html',
+  styleUrl: '../select.css',
+  imports: [
+    Combobox,
+    ComboboxInput,
+    ComboboxPopup,
+    ComboboxPopupContainer,
+    Listbox,
+    Option,
+    OverlayModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectDisabledExample {
+  /** The items available for selection. */
+  items = ['Option 1', 'Option 2', 'Option 3'];
+}
diff --git a/src/dev-app/aria-select/select-demo.html b/src/dev-app/aria-select/select-demo.html
index bd41d26edb61..edd0a8f94caa 100644
--- a/src/dev-app/aria-select/select-demo.html
+++ b/src/dev-app/aria-select/select-demo.html
@@ -8,4 +8,9 @@ <h2>Select Example</h2>
     <h2>Multiselect Example</h2>
     <select-multi-example></select-multi-example>
   </div>
+
+  <div class="example-container">
+    <h2>Disabled Example</h2>
+    <select-disabled-example></select-disabled-example>
+  </div>
 </div>
diff --git a/src/dev-app/aria-select/select-demo.ts b/src/dev-app/aria-select/select-demo.ts
index 6253c848a833..bfc1acc7f7ff 100644
--- a/src/dev-app/aria-select/select-demo.ts
+++ b/src/dev-app/aria-select/select-demo.ts
@@ -7,13 +7,17 @@
  */
 
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
-import {SelectMultiExample, SelectExample} from '@angular/components-examples/aria/select';
+import {
+  SelectDisabledExample,
+  SelectMultiExample,
+  SelectExample,
+} from '@angular/components-examples/aria/select';
 
 @Component({
   templateUrl: 'select-demo.html',
   styleUrl: 'select-demo.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [SelectMultiExample, SelectExample],
+  imports: [SelectDisabledExample, SelectMultiExample, SelectExample],
 })
 export class SelectDemo {}

From d39c05e20b14df6e91fddcf47b12d4629f246a61 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Tue, 9 Dec 2025 17:20:10 -0500
Subject: [PATCH 5/7] docs: aria select demo layout

---
 src/dev-app/aria-select/select-demo.css  |  9 +++++++++
 src/dev-app/aria-select/select-demo.html | 24 +++++++++++-------------
 src/dev-app/aria-select/select-demo.ts   |  1 -
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/dev-app/aria-select/select-demo.css b/src/dev-app/aria-select/select-demo.css
index e69de29bb2d1..e91c57a78bd9 100644
--- a/src/dev-app/aria-select/select-demo.css
+++ b/src/dev-app/aria-select/select-demo.css
@@ -0,0 +1,9 @@
+:host {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10rem;
+}
+
+.example-container {
+  width: 250px;
+}
diff --git a/src/dev-app/aria-select/select-demo.html b/src/dev-app/aria-select/select-demo.html
index edd0a8f94caa..b3c95c298274 100644
--- a/src/dev-app/aria-select/select-demo.html
+++ b/src/dev-app/aria-select/select-demo.html
@@ -1,16 +1,14 @@
-<div class="demo-container">
-  <div class="example-container">
-    <h2>Select Example</h2>
-    <select-example></select-example>
-  </div>
+<div class="example-container">
+  <h2>Select Example</h2>
+  <select-example></select-example>
+</div>
 
-  <div class="example-container">
-    <h2>Multiselect Example</h2>
-    <select-multi-example></select-multi-example>
-  </div>
+<div class="example-container">
+  <h2>Multiselect Example</h2>
+  <select-multi-example></select-multi-example>
+</div>
 
-  <div class="example-container">
-    <h2>Disabled Example</h2>
-    <select-disabled-example></select-disabled-example>
-  </div>
+<div class="example-container">
+  <h2>Disabled Example</h2>
+  <select-disabled-example></select-disabled-example>
 </div>
diff --git a/src/dev-app/aria-select/select-demo.ts b/src/dev-app/aria-select/select-demo.ts
index bfc1acc7f7ff..aa0df8fcf9c3 100644
--- a/src/dev-app/aria-select/select-demo.ts
+++ b/src/dev-app/aria-select/select-demo.ts
@@ -16,7 +16,6 @@ import {
 @Component({
   templateUrl: 'select-demo.html',
   styleUrl: 'select-demo.css',
-  encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [SelectDisabledExample, SelectMultiExample, SelectExample],
 })

From 9d671c9e6be156126db4a86a513304ab4da586ed Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Tue, 9 Dec 2025 17:38:35 -0500
Subject: [PATCH 6/7] fixup! docs: aria select demo layout

---
 src/dev-app/aria-select/select-demo.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/dev-app/aria-select/select-demo.ts b/src/dev-app/aria-select/select-demo.ts
index aa0df8fcf9c3..ef1e85d8c332 100644
--- a/src/dev-app/aria-select/select-demo.ts
+++ b/src/dev-app/aria-select/select-demo.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {
   SelectDisabledExample,
   SelectMultiExample,

From 6e3e12a5fb28db8438baa1453f991ec3a60dfa05 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Tue, 9 Dec 2025 18:10:34 -0500
Subject: [PATCH 7/7] fixup! docs: aria select demo layout

---
 src/components-examples/aria/select/select.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components-examples/aria/select/select.css b/src/components-examples/aria/select/select.css
index cbcaadbc9440..282b043531f1 100644
--- a/src/components-examples/aria/select/select.css
+++ b/src/components-examples/aria/select/select.css
@@ -1,10 +1,12 @@
 .example-select {
-  width: fit-content;
   position: relative;
   display: flex;
   align-items: center;
   border: 1px solid var(--mat-sys-outline);
   border-radius: var(--mat-sys-corner-extra-small);
+
+  /* stylelint-disable-next-line material/no-prefixes -- Valid in all remotely recent browsers. */
+  width: fit-content;
 }
 
 .example-select:has([ngComboboxInput][aria-disabled='true']) {