The render callbacks return raw HTML (or a DOM element) so you can build rich option rows, restyle badges, or replace a whole pill with a card. They are set imperatively on the element in setup(el), never as attributes.

CR01 Rich option rows

renderOptionContentCallback builds a multi-line row with icon, label, and subtitle.

Open the dropdown — each row renders your HTML instead of the plain label.

Quick usage 
 
 
  • renderOptionContentCallback receives (item, ctx) and returns the
						row's inner HTML.
    •  
  • In v2.0.0 the ctx is presentation-aware (ctx.isFullscreen), so
						you can render leaner rows on phones where the dropdown goes fullscreen.
 
The option callback 
 
 
 
 
CR02 Whole-badge rendering (v2.0.0)
 
renderBadgeCallback replaces the entire pill — here a Bootstrap badge with its own remove button.
 
  
Select a few countries — each selection becomes a fully custom badge you own.
 
 
Quick usage 
 
 
 
  • renderBadgeCallback is new in v2.0.0 and owns the whole badge,
						not just its content. Return null to fall back to the default pill for an
						item.
    •  
  • Any element inside your badge with data-action="remove" triggers deselect —
						the component wires it up for you, no event handlers required.
    •  
  • renderBadgeContentCallback is the lighter alternative when you only want to
						change the content inside the built-in pill.
 
The whole-badge callback