📏 Sizes & Fonts

Global Scaling with --ms-rem

The --ms-rem CSS variable (default: 10px) controls the base unit for all dimensions. Change it to scale the entire component proportionally.

<!-- Scale entire component by changing --ms-rem -->
<web-multiselect style="--ms-rem: 8px;"></web-multiselect>  <!-- 80% size -->
<web-multiselect style="--ms-rem: 12px;"></web-multiselect> <!-- 120% size -->

<!-- Or via CSS class -->
<style>
  web-multiselect.compact { --ms-rem: 8px; }
  web-multiselect.large { --ms-rem: 15px; }
</style>

Fine-Grained Control

Override individual CSS variables for precise control over specific dimensions.

<style>
  #my-multiselect {
    --ms-input-font-size: 18px;
    --ms-input-padding: 12px 16px;
    --ms-option-title-font-size: 16px;
  }
</style>

Narrow Input, Wide Dropdown

For dense forms where input space is limited: show just a code in the input, but use dropdown-min-width to ensure the dropdown is comfortable for selection.

<!-- Narrow input with wide dropdown -->
<web-multiselect
  style="width: 4rem;"
  dropdown-min-width="20rem"
  multiple="false">
</web-multiselect>

<script>
  // Show just the code in the closed input
  select.renderSelectedContentCallback = (item) => item.code;
  // Show full label in dropdown
  select.getDisplayValueCallback = (item) => `${item.flag} ${item.name}`;
</script>

Scaled with Multiple Selection

All component parts (badges, options, checkboxes) scale together.

Font Families

Set --base-font-family on the element to change the font. Works with any CSS font stack.

Key CSS Variables

Important variables for sizing and typography:

Note: CSS variables must be set on the <web-multiselect> element itself (or via inherited CSS), not on wrapper divs, due to Shadow DOM encapsulation.

Typography Variables

All typography variables with their theme-designer integration: