✨ Custom Rendering

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

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.

Option Rendering Examples

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".

Badge Rendering Examples

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

Single-Select Custom Rendering

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

Combined Callbacks

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.

Advanced Layout Examples

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