starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

Feature Request: Add customizable label or tooltip for allowClear in RadzenDropDown #1823

New Issue
Closed
opened 2026-01-29 17:59:03 +00:00 by claunia · 0 comments
claunia commented 2026-01-29 17:59:03 +00:00
Owner
Copy Link

Originally created by @smeki92 on GitHub (Jul 25, 2025).

Description:

Currently, when AllowClear="true" is set on the RadzenDropDown component, a clear icon (×) is shown, but there is no way to customize its label, tooltip, or appearance. This limits usability and accessibility in applications where:

  • Users need context for what the clear icon does (e.g., "Clear selection", "Reset", or localized versions).
  • Applications require clearer UX for accessibility tools (e.g., screen readers).
  • Developers want to provide dynamic labels (e.g., "Select All", "Deselect All") based on current state, especially in multi-select mode.

Why it's needed:

  • Accessibility: Screen readers have no descriptive text for the clear button, making it unusable for visually impaired users.
  • Localization: There is no way to translate or localize the tooltip or label for the clear icon.
  • Custom UX: In cases like multi-select dropdowns, developers may want to replace the clear icon with a custom item (e.g., "Select All / Deselect All") to provide a clearer interaction model.
  • Consistency: Other UI frameworks (like Angular Material, PrimeNG, etc.) allow customization of such controls, so developers migrating to Radzen expect similar flexibility.

Suggested Improvements:

  • Add a new property like ClearTooltip or ClearLabel.
  • Optionally allow replacing the clear icon with a custom template.
  • Improve accessibility by associating an aria-label with the clear button.
Originally created by @smeki92 on GitHub (Jul 25, 2025). Description: Currently, when AllowClear="true" is set on the RadzenDropDown component, a clear icon (×) is shown, but there is no way to customize its label, tooltip, or appearance. This limits usability and accessibility in applications where: - Users need context for what the clear icon does (e.g., "Clear selection", "Reset", or localized versions). - Applications require clearer UX for accessibility tools (e.g., screen readers). - Developers want to provide dynamic labels (e.g., "Select All", "Deselect All") based on current state, especially in multi-select mode. Why it's needed: - Accessibility: Screen readers have no descriptive text for the clear button, making it unusable for visually impaired users. - Localization: There is no way to translate or localize the tooltip or label for the clear icon. - Custom UX: In cases like multi-select dropdowns, developers may want to replace the clear icon with a custom item (e.g., "Select All / Deselect All") to provide a clearer interaction model. - Consistency: Other UI frameworks (like Angular Material, PrimeNG, etc.) allow customization of such controls, so developers migrating to Radzen expect similar flexibility. Suggested Improvements: - Add a new property like ClearTooltip or ClearLabel. - Optionally allow replacing the clear icon with a custom template. - Improve accessibility by associating an aria-label with the clear button.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1823
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?