Multi-Select Combo Box
- Usage
- Styling
CSS Selectors
The following CSS selectors can be used in stylesheets to target the various parts and states of the component.
- 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] - 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 - 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] - 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 element
-
vaadin-multi-select-combo-box-overlay
- Overlay background
-
vaadin-multi-select-combo-box-overlay
::part(overlay) - Overlay content wrapper
-
vaadin-multi-select-combo-box-overlay
::part(content) - Overlay in loading state
-
vaadin-multi-select-combo-box-overlay
[loading] - Overlay loading indicator
-
vaadin-multi-select-combo-box-overlay
::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