diff --git a/src/dev-app/chips/chips-demo.html b/src/dev-app/chips/chips-demo.html
index 9fd9b56a011b..8f888d998cd3 100644
--- a/src/dev-app/chips/chips-demo.html
+++ b/src/dev-app/chips/chips-demo.html
@@ -134,7 +134,7 @@
Single selection
Multi selection
-
+
@for (hint of restaurantHints; track hint) {
@if (listboxesWithAvatar) {
diff --git a/src/material/chips/chip-listbox.ts b/src/material/chips/chip-listbox.ts
index 3547fcc73222..9a227caccb43 100644
--- a/src/material/chips/chip-listbox.ts
+++ b/src/material/chips/chip-listbox.ts
@@ -163,6 +163,18 @@ export class MatChipListbox
private _hideSingleSelectionIndicator: boolean =
this._defaultOptions?.hideSingleSelectionIndicator ?? false;
+ /** Whether checkmark indicators for single and multiple selection are hidden. */
+ @Input({transform: booleanAttribute})
+ get hideSelectionIndicator(): boolean {
+ return this._hideSelectionIndicator;
+ }
+ set hideSelectionIndicator(value: boolean) {
+ this._hideSelectionIndicator = value;
+ this._syncListboxProperties();
+ }
+ private _hideSelectionIndicator: boolean =
+ this._defaultOptions?.hideSelectionIndicator ?? false;
+
/** Combined stream of all of the child chips' selection change events. */
get chipSelectionChanges(): Observable {
return this._getChipStream(chip => chip.selectionChange);
@@ -369,6 +381,7 @@ export class MatChipListbox
chip._chipListMultiple = this.multiple;
chip.chipListSelectable = this._selectable;
chip._chipListHideSingleSelectionIndicator = this.hideSingleSelectionIndicator;
+ chip._chipListHideSelectionIndicator = this.hideSelectionIndicator;
chip._changeDetectorRef.markForCheck();
});
});
diff --git a/src/material/chips/chip-option.ts b/src/material/chips/chip-option.ts
index 6e28a1a4d429..b236b0d5c912 100644
--- a/src/material/chips/chip-option.ts
+++ b/src/material/chips/chip-option.ts
@@ -93,6 +93,10 @@ export class MatChipOption extends MatChip implements OnInit {
_chipListHideSingleSelectionIndicator: boolean =
this._defaultOptions?.hideSingleSelectionIndicator ?? false;
+ /** Whether the chip list hides selection indicator for single and multiple selection. */
+ _chipListHideSelectionIndicator: boolean =
+ this._defaultOptions?.hideSelectionIndicator ?? false;
+
/**
* Whether or not the chip is selectable.
*
@@ -188,6 +192,10 @@ export class MatChipOption extends MatChip implements OnInit {
return true;
}
+ if (this._chipListHideSelectionIndicator) {
+ return false;
+ }
+
// The checkmark graphic communicates selected state for both single-select and multi-select.
// Include checkmark in single-select to fix a11y issue where selected state is communicated
// visually only using color (#25886).
diff --git a/src/material/chips/tokens.ts b/src/material/chips/tokens.ts
index 945ac4bc39b2..74752cb6ff89 100644
--- a/src/material/chips/tokens.ts
+++ b/src/material/chips/tokens.ts
@@ -24,6 +24,9 @@ export interface MatChipsDefaultOptions {
/** Whether icon indicators should be hidden for single-selection. */
hideSingleSelectionIndicator?: boolean;
+ /** Whether icon indicators should be hidden for multiple and single selection */
+ hideSelectionIndicator?: boolean;
+
/** Whether the chip input should be interactive while disabled by default. */
inputDisabledInteractive?: boolean;
}