Docs

Docs

Multi-Select Combo Box Styling

Styling API reference for the Multi-Select Combo Box component.

Style Variants

The following style variants can be applied:

Variant Description Supported by

small

Renders a more compact field

Aura, Lumo

filled

Uses a solid background color for hovered and active items in the overlay

Aura

helper-above-field

Renders the helper above the field, and below the label

Aura, Lumo

Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the html {…​} selector. See Component Style Properties for more information on style properties.

Note
Input Field Components Shared Styles
Style properties whose names start with --vaadin-input-field are shared among all input field components. To apply them only to a specific type of component, use an element selector like vaadin-text-field {…​}

Field Surface

Common Properties

Property Supported by

--vaadin-input-field-background

Aura, Lumo

--vaadin-input-field-border-color

Aura, Lumo

--vaadin-input-field-border-radius

Aura, Lumo

--vaadin-input-field-border-width

Aura, Lumo

--vaadin-input-field-bottom-end-radius

Aura, Lumo

--vaadin-input-field-bottom-start-radius

Aura, Lumo

--vaadin-input-field-container-gap

Aura

--vaadin-input-field-height

Lumo

--vaadin-input-field-padding

Aura

--vaadin-input-field-placeholder-color

Aura, Lumo

--vaadin-input-field-top-start-radius

Aura, Lumo

--vaadin-input-field-top-end-radius

Aura, Lumo

--vaadin-input-field-value-color

Aura, Lumo

--vaadin-input-field-value-font-size

Aura, Lumo

--vaadin-input-field-value-font-weight

Aura, Lumo

--vaadin-input-field-value-line-height

Aura, Lumo

Field States

Property Supported by

--vaadin-focus-ring-width

Aura, Lumo

--vaadin-focus-ring-color

Aura, Lumo

--vaadin-input-field-disabled-background

Aura, Lumo

--vaadin-input-field-disabled-text-color

Aura

--vaadin-input-field-disabled-value-color

Lumo

--vaadin-input-field-hover-highlight

Lumo

--vaadin-input-field-hover-highlight-opacity

Lumo

--vaadin-input-field-invalid-background

Lumo

--vaadin-input-field-invalid-hover-highlight

Lumo

--vaadin-input-field-readonly-border

Lumo

Label

Property Supported by

--vaadin-input-field-focused-label-color

Lumo

--vaadin-input-field-hovered-label-color

Lumo

--vaadin-input-field-label-color

Aura, Lumo

--vaadin-input-field-label-font-size

Aura, Lumo

--vaadin-input-field-label-font-weight

Aura, Lumo

--vaadin-input-field-label-line-height

Aura, Lumo

--vaadin-input-field-required-indicator-color

Aura, Lumo

--vaadin-input-field-required-indicator

Aura, Lumo

Helper

Property Supported by

--vaadin-input-field-helper-color

Aura, Lumo

--vaadin-input-field-helper-font-size

Aura, Lumo

--vaadin-input-field-helper-font-weight

Aura, Lumo

--vaadin-input-field-helper-line-height

Aura, Lumo

--vaadin-input-field-helper-spacing

Lumo

Error Message

Property Supported by

--vaadin-input-field-error-color

Aura, Lumo

--vaadin-input-field-error-font-size

Aura, Lumo

--vaadin-input-field-error-font-weight

Aura, Lumo

--vaadin-input-field-error-line-height

Aura, Lumo

Field Buttons

Property Supported by

--vaadin-clickable-cursor

Aura

--vaadin-disabled-cursor

Aura

--vaadin-icon-size

Aura

--vaadin-icon-visual-size

Aura

--vaadin-input-field-button-text-color

Aura

--vaadin-input-field-icon-size

Lumo

--vaadin-input-field-icon-color

Lumo

Chips

Property Supported by

--vaadin-chip-background

Aura

--vaadin-chip-border-color

Aura

--vaadin-chip-border-radius

Aura

--vaadin-chip-border-width

Aura

--vaadin-chip-font-size

Aura

--vaadin-chip-font-weight

Aura

--vaadin-chip-gap

Aura

--vaadin-chip-height

Aura

--vaadin-chip-padding

Aura

--vaadin-chip-remove-button-text-color

Aura

--vaadin-chip-text-color

Aura

Overlay

Property Supported by

--vaadin-multi-select-combo-box-overlay-width

Aura, Lumo

--vaadin-multi-select-combo-box-overlay-max-height

Aura, Lumo

--vaadin-item-overlay-padding

Aura

--vaadin-overlay-background

Aura

--vaadin-overlay-border-color

Aura

--vaadin-overlay-border-radius

Aura

--vaadin-overlay-border-width

Aura

--vaadin-overlay-shadow

Aura

--vaadin-spinner-color

Aura

--vaadin-spinner-width

Aura

--vaadin-spinner-size

Aura

--vaadin-spinner-animation-duration

Aura

Overlay Items

Property Supported by

--vaadin-item-border-radius

Aura

--vaadin-item-checkmark-color

Aura

--vaadin-icon-size

Aura

--vaadin-item-gap

Aura

--vaadin-item-height

Aura

--vaadin-item-padding

Aura

--vaadin-focus-ring-width

Aura, Lumo

--vaadin-focus-ring-color

Aura, Lumo

Animation

The overlay has a built-in opening and closing animation, which is disabled until an animation duration is set. The closed properties define the state that the overlay animates from when it opens, and to when it closes. The Aura theme sets these properties for some components. Lumo has its own overlay animations, which these properties don’t affect.

While an animation runs, the component has the opening or closing state attribute, so separate values can be applied to each direction. The backdrop always fades, and only the opacity is animated when the user prefers reduced motion.

Property Value syntax Initial value

--vaadin-overlay-animation-delay

<time>

0s

--vaadin-overlay-animation-duration

<time>

0s

--vaadin-overlay-animation-timing-function

<easing-function>

ease

--vaadin-overlay-opacity-closed

<number>

0

--vaadin-overlay-scale-closed

<number> or <percentage>

1

--vaadin-overlay-transform-closed

<transform-list>

none

--vaadin-overlay-translate-closed

<length>+ or <percentage>+

0px

Miscellaneous

Property Supported By

--vaadin-multi-select-combo-box-input-min-width

Aura, Lumo

CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.

Important
Not for Shadow DOM
These selectors should be used in styles.css or another stylesheet loaded with the @StyleSheet annotation or the @import CSS rule. They do not work in the shadow DOM of Vaadin components, such as in stylesheets in the components sub-folder or loaded with the @CssImport annotation’s themeFor property.
Root element

vaadin-multi-select-combo-box

States

Required

vaadin-multi-select-combo-box[required]

Focused

vaadin-multi-select-combo-box[focused]

Keyboard focused

vaadin-multi-select-combo-box[focus-ring]

Read-only

vaadin-multi-select-combo-box[readonly]

Disabled

vaadin-multi-select-combo-box[disabled]

Not empty

vaadin-multi-select-combo-box[has-value]

With open overlay

vaadin-multi-select-combo-box[opened]

Loading items

vaadin-multi-select-combo-box[loading]

Hovered

vaadin-multi-select-combo-box:hover

Field

Field surface (background, border)

vaadin-multi-select-combo-box::part(input-field)

Native input element

vaadin-multi-select-combo-box > input

Input field with placeholder shown

vaadin-multi-select-combo-box > input:placeholder-shown

Clear and Toggle buttons

vaadin-multi-select-combo-box::part(field-button)

Toggle Button

vaadin-multi-select-combo-box::part(toggle-button)

Clear button

vaadin-multi-select-combo-box::part(clear-button)

Clear button icon

vaadin-multi-select-combo-box::part(clear-button)::before

Prefix element

vaadin-multi-select-combo-box > [slot="prefix"]

Suffix element

vaadin-multi-select-combo-box > [slot="suffix"]

Label

Field with label

vaadin-multi-select-combo-box[has-label]

Label

vaadin-multi-select-combo-box::part(label)

Label text

vaadin-multi-select-combo-box > label

Required indicator

vaadin-multi-select-combo-box::part(required-indicator)

Helper and Validation Error

Field with helper

vaadin-multi-select-combo-box[has-helper]

Helper

vaadin-multi-select-combo-box::part(helper-text)

Helper text

vaadin-multi-select-combo-box > [slot="helper"]

Invalid field

vaadin-multi-select-combo-box[invalid]

Field with error message

vaadin-multi-select-combo-box[has-error-message]

Error message

vaadin-multi-select-combo-box::part(error-message)

Error message text

vaadin-multi-select-combo-box > [slot="error-message"]

Chips

Chip element

vaadin-multi-select-combo-box-chip

Focused chip

vaadin-multi-select-combo-box-chip[focused]

Hovered chip

vaadin-multi-select-combo-box-chip:hover

Chip label

vaadin-multi-select-combo-box-chip::part(label)

Chip remove button

vaadin-multi-select-combo-box-chip::part(remove-button)

Chip remove button icon

vaadin-multi-select-combo-box-chip::part(remove-button)::before

Overflow Chip

vaadin-multi-select-combo-box-chip[slot="overflow"]

Overflow-chip with 2 items

vaadin-multi-select-combo-box-chip[count="2"]

Chip container inside field

vaadin-multi-select-combo-box::part(chips)

Overlay

Overlay background

vaadin-multi-select-combo-box::part(overlay)

Overlay content wrapper

vaadin-multi-select-combo-box::part(content)

Overlay loading indicator

vaadin-multi-select-combo-box::part(loader)

Items

Item element

vaadin-multi-select-combo-box-item

Selected item

vaadin-multi-select-combo-box-item[selected]

Item selection indicator

vaadin-multi-select-combo-box-item::part(checkmark)

Item selection indicator icon

vaadin-multi-select-combo-box-item::part(checkmark)::before

Focused item

vaadin-multi-select-combo-box-item[focused]

Item content wrapper

vaadin-multi-select-combo-box-item::part(content)

Hovered item

vaadin-multi-select-combo-box-item:hover

Updated –