I was wondering if it's currently possible — or if it could be considered for a future update — to allow customization or override of how the "options selected" count text is rendered.
Specifically, it would be great to:
Render the count as a badge (e.g., a styled circle or label) instead of plain text.
Have the flexibility to position the count on the right side of the toggle/button, rather than the default location.
This would help with UI consistency and make the component more visually adaptable to different design systems.
Something like
renderSelectedValue: ({ selectedLength, maxValues, optionsSelectedText, allOptionsSelectedText, showAllText, showValueAsTags, valueTooltip }) => {
return `<div class="my-custom-badge">
<span class="badge">${selectedLength}</span>
<span class="label">${optionsSelectedText}</span>
</div>`;
}
// Inside of the select custom text:
setValueText
if (this.renderSelectedValue) ...
I did do a hack where I modified the style, but I can move the label over to the right with float:right
I was wondering if it's currently possible — or if it could be considered for a future update — to allow customization or override of how the "options selected" count text is rendered.
Specifically, it would be great to:
Render the count as a badge (e.g., a styled circle or label) instead of plain text.
Have the flexibility to position the count on the right side of the toggle/button, rather than the default location.
This would help with UI consistency and make the component more visually adaptable to different design systems.
Something like
I did do a hack where I modified the style, but I can move the label over to the right with
float:right