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

Lumo

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

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-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-icon-visual-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

Miscellaneous

Property Supported By

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

Aura, Lumo

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

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