Default Styling

Out-of-the-box appearance

Live Demo
Try It

No custom styling applied.

Uses default component colors and spacing.

Theme
Default Theme

Clean, neutral styling that works everywhere.

No configuration needed.

Primary Theme

Bootstrap primary color theme

Live Demo
Try It

Uses Bootstrap primary color for borders and selections.

Apply with class="primary-theme"

Theme
CSS Variables

--ml-input-border-color

--ml-option-selected-bg

--ml-badge-bg

Customized to Bootstrap primary color.

Custom Dark Theme

Fully customized dark appearance

Live Demo
Try It

Complete dark theme with custom purple accent.

All colors customized via CSS variables.

Theme
Full Customization

Override any visual aspect:

  • Background colors
  • Text colors
  • Border colors
  • Hover states

Available CSS Variables

Customize any aspect of the component using CSS variables:

Input & Dropdown 
 
 
Options, Pills & Groups 
 
 
 
Theming Examples
 
Success Theme 
 
 
 
Minimal Theme 
 
 
 
🎨 Styling Tips
 
  • CSS Variables: All variables use the --ml- prefix to avoid conflicts
    •  
  • Scope: Apply custom classes to the multiselect element for scoped styling
    •  
  • Shadow DOM: Styles are applied inside Shadow DOM, ensuring encapsulation
    •  
  • SCSS: Import and override SCSS variables for deeper customization
    •  
  • Complete List: View all variables in the Styling API Reference