Documentation

Documentation versions (currently viewingVaadin 24)

Combo Box

Styling API reference for the Combo Box component.

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

Feature Property Default Value

Background

--vaadin-input-field-background

--lumo-contrast-10pct

Background, invalid

--vaadin-input-field-invalid-background

--lumo-error-color-10pct

Background, hover highlight color

--vaadin-input-field-hover-highlight

--lumo-contrast-50pct

Background, invalid hover highlight color

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

--lumo-error-color-50pct

Border width

--vaadin-input-field-border-width

0

Border color

--vaadin-input-field-border-color

--lumo-contrast-50pct

Hover highlight opacity

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

0.1

Height

--vaadin-input-field-height

--lumo-size-m

Value text color

--vaadin-input-field-value-color

--lumo-body-text-color

Value font size

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

--lumo-font-size-m

Value font weight

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

400

Placeholder text color

--vaadin-input-field-placeholder-color

--lumo-secondary-text-color

Border radius

--vaadin-input-field-border-radius

--lumo-border-radius-m

Read-only border

--vaadin-input-field-readonly-border

1px dashed --lumo-contrast-30pct

Label

Feature Property Default Value

Color

--vaadin-input-field-label-color

--lumo-secondary-text-color

Focused color

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

--lumo-primary-text-color

Hovered color

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

--lumo-body-text-color

Font size

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

--lumo-font-size-s

Font weight

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

500

Helper

Feature Property Default Value

Font size

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

--lumo-font-size-xs

Font weight

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

400

Color

--vaadin-input-field-helper-color

--lumo-secondary-text-color

Top margin

--vaadin-input-field-helper-spacing

0.4em

Error Message

Feature Property Default Value

Font size

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

--lumo-font-size-xs

Font weight

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

400

Color

--vaadin-input-field-error-color

--lumo-error-text-color

Icons

Feature Property Default Value

Font size

--vaadin-input-field-icon-font-size

--lumo-icon-size-m

Color

--vaadin-input-field-icon-color

--lumo-contrast-60pct

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

States

Required

vaadin-combo-box[required]

Focused

vaadin-combo-box[focused]

Keyboard focused

vaadin-combo-box[focus-ring]

Read-only

vaadin-combo-box[readonly]

Disabled

vaadin-combo-box[disabled]

Not empty

vaadin-combo-box[has-value]

With open overlay

vaadin-combo-box[opened]

Hovered

vaadin-combo-box:hover

Field

Field surface (background, border)

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

Native input element

vaadin-combo-box > input

Input field with placeholder shown

vaadin-combo-box > input:placeholder-shown

Toggle Button

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

Clear button

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

Clear button icon

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

Prefix element

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

Read-only border

vaadin-combo-box::part(input-field)::after

Label

Field with label

vaadin-combo-box[has-label]

Label

vaadin-combo-box::part(label)

Label text

vaadin-combo-box > label

Required indicator

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

Helper and Validation Error

Field with helper

vaadin-combo-box[has-helper]

Helper

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

Helper text

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

Invalid field

vaadin-combo-box[invalid]

Error message

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

Error message text

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

Overlay

Overlay element

vaadin-combo-box-overlay

Overlay background

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

Overlay content wrapper

vaadin-combo-box-overlay::part(content)

Overlay in loading state

vaadin-combo-box-overlay[loading]

Overlay loading indicator

vaadin-combo-box-overlay::part(loader)

Items

Item element

vaadin-combo-box-item

Selected item

vaadin-combo-box-item[selected]

Item selection indicator

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

Item selection indicator icon

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

Focused item

vaadin-combo-box-item[focused]

Item content wrapper

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

Hovered item

vaadin-combo-box-item:hover