✨ Custom Rendering

Fully customize options, badges, and selected items using render callbacks with HTML or DOM elements

🌐 client — runs in the browser (element JS API) 🖥️ server — LiveView round-trip

Why this page uses inline scripts

Render callbacks must be JavaScript functions — they can't round-trip through HTML attributes. Each multiselect below gets its .options and render callbacks assigned via a small page script after the custom element upgrades.

CR01 · Option Rendering Examples

JS callback (no attribute): set el.renderOptionContentCallback · size rows with option_height={75} · overflow badges with badges_threshold={2}

These examples demonstrate renderOptionContentCallback for customizing how options appear in the dropdown.

1. Framework Selector with Descriptions

Select Frameworks

Multi-line options with framework descriptions, star counts, and badges

2. Rich Product List

Select Products

Product cards with descriptions, ratings, prices, and stock status. Uses getBadgeClassCallback for dynamic price-based badge colors (Budget: green, Mid-Range: blue, Premium: pink). Price badges in dropdown options also color-coded based on price ranges.

3. Article/Blog Post Selector

Select Articles

Rich content with title, excerpt, author, and read time

4. Job Listing Selector

Select Jobs

Job cards with company, salary, location, and tech stack

5. Movie/Media Selector

Select Movies

Movie details with genre, rating, year, and synopsis

6. Image/File Picker

Select Images

Image thumbnails with filename, dimensions, and file size. Shows max 2 badges then "+N more".

CR02 · Badge Rendering Examples

JS callback (no attribute): set el.renderBadgeContentCallback — return compact vs detailed markup via context.isInPopover

These examples demonstrate renderBadgeContentCallback for customizing selected item badges.

7. User Selector with Avatars

Select Team Members

Compact badges in main area, detailed badges in popover

8. Tags with Icons

Select Tags

Badges with category icons and colors

CR03 · Fully Restyled Badges (make them sexy)

JS callbacks (no attribute): el.renderBadgeContentCallback · el.getBadgeClassCallback · el.customStylesCallback

Own the whole pill's look without a special hook — three callbacks working together. The wrapper (.ms__badge) and the remove × stay component-owned so removal keeps working; you own the content and the styling.

Select Team Members

Pill-shaped badges with avatars; VIPs get a gradient fill. The remove button still works.

The pill is two layers

The visible fill is split between .ms__badge-text (--ms-badge-text-bg) and .ms__badge-remove (--ms-badge-remove-bg). For a continuous gradient, paint it on the wrapper .ms__badge and make those two transparent (the wrapper has overflow: hidden, so it clips into one clean pill).

// 1) Own the badge CONTENT (rendered inside .ms__badge-text)
el.renderBadgeContentCallback = (item) =>
  `<img class="ava" src="${item.avatar}" alt=""><span>${item.name}</span>`;

// 2) Tag special items so their pill can be styled
el.getBadgeClassCallback = (item) => item.vip ? 'badge--vip' : '';

// 3) Inject CSS into the shadow DOM (page CSS can't reach the pill)
el.customStylesCallback = () => `
  .ms__badge { border-radius: 999px; }                 /* pill shape */
  .ms__badge-text { gap: .4rem; padding-inline-start: .35rem; }
  .ms__badge .ava { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

  /* VIP: one continuous gradient across the whole pill */
  .ms__badge.badge--vip { background: linear-gradient(135deg, #7c3aed, #ec4899); }
  .ms__badge.badge--vip .ms__badge-text,
  .ms__badge.badge--vip .ms__badge-remove {
    background: transparent; color: #fff; border-color: transparent;
  }
`;

CR04 · Whole-Badge Render (icon-pack picker)

JS callback: el.renderBadgeCallback = (item) => … · returns the entire badge markup, not just its content

renderBadgeCallback returns the whole badge, so a selection can be a full card rather than a pill. The component wraps your markup in .ms__badge.ms__badge--custom and delegates removal to any element inside with data-action="remove".

Team members

CR05 · Own the Whole Selection UI (external container)

enable_selected_popover={false} · badges_display_mode="count" · show_counter={true}

With the badges collapsed to a [N] counter, the built-in popover that opens on clicking the counter is redundant when you render your own selection list. Setting enable_selected_popover={false} makes every popover trigger inert and drops the pointer cursor — the counter here no longer opens anything.

Skills (counter is inert)

CR06 · Single-Select Custom Rendering

multiple={false} · JS callback (no attribute): set el.renderSelectedContentCallback for the closed-input text and el.getDisplayValueCallback for the dropdown label

These examples demonstrate renderSelectedContentCallback for customizing the selected value text in single-select mode.

9. Person Selector (First Name Only When Closed)

Select Person

Shows full name in dropdown, first name only when closed

10. Country Code (Abbreviation When Closed)

Select Country

Shows full country name in dropdown, code when closed

CR07 · Combined Callbacks

badges_threshold={3} · badges_threshold_mode="partial" · enable_badge_tooltips={true} — plus JS el.renderOptionContentCallback / el.renderBadgeContentCallback / el.getBadgeDisplayCallback

Examples demonstrating how to combine multiple rendering callbacks for sophisticated customization. These examples show how renderOptionContentCallback and renderBadgeContentCallback work together to create different displays for the same data in different contexts (dropdown vs badges vs popover).

11. Context-Aware Rendering

Select Projects

Combines 3 callbacks: renderOptionContentCallback (rich dropdown with status, priority, tags), renderBadgeContentCallback (compact "▶️ Name" in main area, detailed "▶️ Name [priority]" in popover using context.isInPopover), and getBadgeDisplayCallback (plain text "Name - status (priority)" for tooltips).

12. Priority-Based Badge Styling

Select Tasks

Uses renderBadgeContentCallback for compact badge display and renderSelectedItemContentCallback for detailed popover display. Uses getBadgeClassCallback to add priority-based CSS classes (badge-urgent, badge-important, badge-normal, badge-low). Uses customStylesCallback to inject CSS into Shadow DOM for styling those classes. Demonstrates separate callbacks for badges vs. selected items popover and solving Shadow DOM CSS isolation.

CR08 · Advanced Layout Examples

checkbox_align="center | top" · option_height={90} — CSS-grid/flex markup comes from JS el.renderOptionContentCallback

Examples demonstrating flex/grid layouts with checkbox alignment control.

13. Grid Layout with Centered Checkboxes

Product Comparison Grid

CSS Grid layout with 2-column spec comparison, checkboxes centered

14. Flex Layout with Top-Aligned Checkboxes

Notification Settings

Flexbox layout showing setting details with icons and badges

15. Large Checkbox Scale Example

Important Agreements

Larger checkboxes (1.5x scale) for better visibility and accessibility

🔌 Server round-trip

The LiveView server saw 0 event(s) from the wrapper.

(pick an option anywhere on this page)