Blazor Dropdown List Example - Grouping and Icons

This example demonstrates grouping and icon support in the DropDownList component to present data in an organized and scannable manner. Grouping improves discoverability of related items while icons provide visual cues to aid recognition without changing selection behavior.

Use the GroupBy property to group related entries under headers; for example, vegetables are grouped by a Category field in the data object so items appear under logical headings. Group headers help users navigate the list and remain non‑selectable for clear structure.

Render icons for suggestions using the IconCss property. Treat decorative icons as non-essential to screen readers (for example, add aria-hidden="true") and ensure each item retains a clear text label so assistive technologies convey option content accurately. Maintain consistent icon styling to avoid distracting from item text.

• Group relevant items with GroupBy for clearer organization.
• Example: vegetables grouped by the Category property in the data object.
• Render suggestion icons via IconCss; mark decorative icons with aria-hidden="true".

See also

• Blazor DropDownList - Grouping