Overview
The MultiSelect component provides 125+ semantic CSS variables for complete visual customization, built on a semantic color system with accent and neutral color scales. All variables use the --ml- prefix to avoid naming conflicts.
Variables are applied inside the Shadow DOM, ensuring style encapsulation while allowing you to customize appearance through CSS variable inheritance.
How to Customize
CSS Approach
SCSS Approach (Recommended)
SCSS Color Palette
The component uses a semantic three-tier variable system: base primitives → semantic color scales → component variables. This allows you to customize the entire color scheme by overriding just the semantic colors.
Accent Colors
Primary/accent colors for interactive elements, selected states, and highlights:
| SCSS Variable | Default | Description |
|---|---|---|
$ml-color-accent-lightest | #eff6ff | Lightest accent shade - badge backgrounds |
$ml-color-accent-lighter | #e0f2fe | Lighter accent shade - hover states |
$ml-color-accent-base | #3b82f6 | Base accent color - primary actions |
$ml-color-accent-dark | #2563eb | Dark accent shade - hover/active states |
$ml-color-accent-darker | #1d4ed8 | Darkest accent shade - pressed states |
Neutral Colors
Grayscale colors for borders, backgrounds, and text:
| SCSS Variable | Default | Description |
|---|---|---|
$ml-color-white | #ffffff | Pure white - backgrounds |
$ml-color-neutral-lightest | #f9fafb | Lightest neutral - hover backgrounds |
$ml-color-neutral-lighter | #f3f4f6 | Lighter neutral - subtle backgrounds |
$ml-color-neutral-light | #e5e7eb | Light neutral - borders, dividers |
$ml-color-neutral-base | #d1d5db | Base neutral - inactive elements |
$ml-color-neutral-dark | #6b7280 | Dark neutral - secondary text, placeholders |
$ml-color-neutral-darkest | #111827 | Darkest neutral - primary text |
💡 Customization Example
Input Component
Variables controlling the main input/trigger area:
| Variable | Default | Description |
|---|---|---|
--ml-input-bg | #fff | Background color |
--ml-input-color | #212529 | Text color |
--ml-input-border-color | #dee2e6 | Border color |
--ml-input-border-width | 1px | Border width |
--ml-input-border-radius | 0.375rem | Border radius |
--ml-input-padding | 0.5rem 0.75rem | Inner padding |
--ml-input-font-size | 1rem | Font size |
--ml-input-line-height | 1.5 | Line height |
--ml-input-placeholder-color | #6c757d | Placeholder text color |
--ml-input-disabled-bg | #e9ecef | Background when disabled |
--ml-input-disabled-color | #6c757d | Text color when disabled |
Focus State
Variables for the focused input state:
| Variable | Default | Description |
|---|---|---|
--ml-input-focus-border-color | #86b7fe | Border color when focused |
--ml-input-focus-shadow | 0 0 0 0.25rem rgba(13, 110, 253, 0.25) | Box shadow when focused |
--ml-input-focus-bg | #fff | Background when focused |
Dropdown
Variables controlling the dropdown menu appearance:
| Variable | Default | Description |
|---|---|---|
--ml-dropdown-bg | #fff | Background color |
--ml-dropdown-border-color | #dee2e6 | Border color |
--ml-dropdown-border-width | 1px | Border width |
--ml-dropdown-border-radius | 0.375rem | Border radius |
--ml-dropdown-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.15) | Box shadow |
--ml-options-max-height | 20rem | Maximum height |
--ml-dropdown-z-index | 1000 | Z-index stacking |
--ml-dropdown-padding | 0.5rem 0 | Inner padding |
Options
Variables for individual option items in the dropdown:
| Variable | Default | Description |
|---|---|---|
--ml-option-padding | 0.5rem 0.75rem | Option padding |
--ml-option-font-size | 1rem | Font size |
--ml-option-line-height | 1.5 | Line height |
--ml-option-color | #212529 | Text color |
--ml-option-bg | transparent | Background color |
--ml-option-hover-bg | #f8f9fa | Background on hover |
--ml-option-hover-color | #212529 | Text color on hover |
--ml-option-selected-bg | #0d6efd | Background when selected |
--ml-option-selected-color | #fff | Text color when selected |
--ml-option-disabled-color | #6c757d | Text color when disabled |
--ml-option-disabled-bg | transparent | Background when disabled |
--ml-option-disabled-opacity | 0.5 | Opacity when disabled |
Option Subtitle
| Variable | Default | Description |
|---|---|---|
--ml-option-subtitle-color | #6c757d | Subtitle text color |
--ml-option-subtitle-font-size | 0.875rem | Subtitle font size |
--ml-option-subtitle-margin | 0.25rem 0 0 0 | Subtitle margin |
Option Icon
| Variable | Default | Description |
|---|---|---|
--ml-option-icon-size | 1.25rem | Icon size |
--ml-option-icon-margin | 0 0.5rem 0 0 | Icon margin |
Pills (Selected Items)
Variables for the pill badges showing selected items:
| Variable | Default | Description |
|---|---|---|
--ml-badge-bg | #e9ecef | Background color |
--ml-badge-color | #212529 | Text color |
--ml-badge-border-radius | 0.25rem | Border radius |
--ml-badge-padding | 0.25rem 0.5rem | Padding |
--ml-badge-font-size | 0.875rem | Font size |
--ml-badge-gap | 0.5rem | Gap between pills |
--ml-badge-margin | 0.25rem 0 | Margin around pill container |
Pill Remove Button
| Variable | Default | Description |
|---|---|---|
--ml-badge-remove-color | #212529 | Remove button color |
--ml-badge-remove-hover-bg | #dc3545 | Background on hover |
--ml-badge-remove-hover-color | #fff | Color on hover |
--ml-badge-remove-size | 1rem | Button size |
--ml-badge-remove-margin | 0 0 0 0.25rem | Button margin |
Groups
Variables for grouped option headers:
| Variable | Default | Description |
|---|---|---|
--ml-group-header-bg | #f8f9fa | Background color |
--ml-group-header-color | #6c757d | Text color |
--ml-group-header-padding | 0.5rem 0.75rem | Padding |
--ml-group-header-font-size | 0.875rem | Font size |
--ml-group-header-font-weight | 600 | Font weight |
--ml-group-header-text-transform | uppercase | Text transform |
--ml-group-header-border-bottom | 1px solid #dee2e6 | Bottom border |
Actions (Select All / Clear All)
Variables for action buttons:
| Variable | Default | Description |
|---|---|---|
--ml-actions-padding | 0.5rem 0.75rem | Container padding |
--ml-actions-bg | #fff | Background color |
--ml-actions-border-bottom | 1px solid #dee2e6 | Bottom border |
--ml-actions-gap | 0.5rem | Gap between buttons |
--ml-action-btn-color | #0d6efd | Button text color |
--ml-action-btn-hover-color | #0a58ca | Button hover color |
--ml-action-btn-font-size | 0.875rem | Button font size |
Search Input
Variables specific to the search/filter input:
| Variable | Default | Description |
|---|---|---|
--ml-search-padding | 0.5rem 0.75rem | Padding |
--ml-search-border | none | Border |
--ml-search-font-size | 1rem | Font size |
--ml-search-hint-color | #6c757d | Hint text color |
--ml-search-hint-font-size | 0.875rem | Hint font size |
Counter
Variables for the selection counter:
| Variable | Default | Description |
|---|---|---|
--ml-counter-bg | #0d6efd | Background color |
--ml-counter-color | #fff | Text color |
--ml-counter-font-size | 0.75rem | Font size |
--ml-counter-padding | 0.25rem 0.5rem | Padding |
--ml-counter-border-radius | 0.25rem | Border radius |
Toggle Icon
Variables for the dropdown toggle icon:
| Variable | Default | Description |
|---|---|---|
--ml-toggle-icon-color | #6c757d | Icon color |
--ml-toggle-icon-size | 1rem | Icon size |
--ml-toggle-icon-margin | 0 0 0 0.5rem | Icon margin |
Checkboxes
Variables for option checkboxes:
| Variable | Default | Description |
|---|---|---|
--ml-checkbox-size | 1rem | Checkbox size |
--ml-checkbox-border-color | #dee2e6 | Border color |
--ml-checkbox-checked-bg | #0d6efd | Background when checked |
--ml-checkbox-checked-border | #0d6efd | Border when checked |
--ml-checkbox-margin | 0 0.5rem 0 0 | Checkbox margin |
Loading & Empty States
Variables for loading and empty state messages:
| Variable | Default | Description |
|---|---|---|
--ml-empty-color | #6c757d | Empty state text color |
--ml-empty-font-size | 0.875rem | Empty state font size |
--ml-empty-padding | 1rem 0.75rem | Empty state padding |
--ml-loading-color | #6c757d | Loading text color |
--ml-loading-font-size | 0.875rem | Loading font size |
Complete Theming Examples
Success Theme
Success Theme CSS
Dark Theme
Dark Theme CSS
Minimal Theme
Minimal Theme CSS
Compact Theme
Compact Theme CSS
SCSS Integration
For advanced customization, import the SCSS source and override semantic color variables. Use the modern @use syntax (recommended) instead of deprecated @import:
SCSS Configuration
⚠️ Note: The
@import syntax is deprecated in Dart Sass and will be removed in version 3.0. Use @use for future-proof code.🎨 Styling Best Practices
- CSS Variables: All variables use
--ml-prefix to prevent naming conflicts - Shadow DOM: Variables are inherited into Shadow DOM - set on the component or ancestor
- Cascading: More specific selectors override global :root declarations
- SCSS Source: For build-time customization, import SCSS and override variables before compilation
- Responsive: Use CSS media queries to adjust variables for different screen sizes
- Accessibility: Maintain sufficient color contrast ratios (WCAG AA: 4.5:1 for normal text)
- Performance: CSS variables have negligible performance impact compared to dynamic styles