Skip to content

Enhanced Customization for Count Display #417

@sbahr001

Description

@sbahr001

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions