GR01 Custom Group Labels

Use renderGroupLabelContentCallback to customize how group headers are displayed

Demo
Controls

Open the dropdown to see customized group labels.

Each group has an emoji icon and uppercase text.

The callback returns a string with HTML content.

Description
renderGroupLabelContentCallback

Customize the content inside group labels:

  • Return a string (plain text or HTML)
  • Return an HTMLElement for full control
  • The wrapper .ms__group-label is preserved
String Return Example 
 
 
GR02 Group Styling with CSS Variables
 
Customize group appearance using CSS custom properties
 
Demo
 
 
Controls
 
Open the dropdown to see styled group headers.
 
Purple accent color with bold uppercase labels.
 
Thicker border separating groups.
 
Description
 
CSS Variables
 
--ms-group-border-top
 
--ms-group-label-color
 
--ms-group-label-font-weight
 
--ms-group-label-transform
 
--ms-group-label-letter-spacing
 
Group Container Variables 
 
 
 
Group Label Variables 
 
 
 
GR03 Advanced: Callback + Styling Combined
 
Combine renderGroupLabelContentCallback with CSS variables for full customization
 
Demo
 
 
Controls
 
Open the dropdown to see colored dot indicators.
 
Each category has a unique color dot.
 
Uses HTMLElement return for inline styles.
 
Description
 
HTMLElement Return
 
Return an HTMLElement for full control:
 
  • Create dynamic content
    •  
  • Add inline styles
    •  
  • Include custom HTML structure
 
HTMLElement Return Example 
 
 
 
All Group CSS Variables
 
Group Container
 
  • --ms-group-border-top - Border between groups
    •  
  • --ms-group-margin-top - Margin above group
    •  
  • --ms-group-padding-top - Padding above group
 
Group Label
 
  • --ms-group-label-padding - Label padding
    •  
  • --ms-group-label-font-size - Font size
    •  
  • --ms-group-label-font-weight - Font weight
    •  
  • --ms-group-label-color - Text color
    •  
  • --ms-group-label-transform - Text transform
    •  
  • --ms-group-label-letter-spacing - Letter spacing