Select
- 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-select
States
- Required
-
vaadin-select[required] - Focused
-
vaadin-select[focused] - Keyboard focused
-
vaadin-select[focus-ring] - Read-only
-
vaadin-select[readonly] - Disabled
-
vaadin-select[disabled] - Not empty
-
vaadin-select[has-value] - With open overlay
-
vaadin-select[opened] - Hovered
-
vaadin-select:hover
Field
- Field surface (background, border)
-
vaadin-select::part(input-field) - Internal button element
-
vaadin-select-value-button - Selected item element inside field
-
vaadin-select-value-button> vaadin-select-item - Selected value
-
vaadin-select-value-button> vaadin-select-item::part(content) - Internal button showing placeholder
-
vaadin-select-value-button[placeholder] - Toggle Button
-
vaadin-select::part(toggle-button) - Prefix element
-
vaadin-select> [slot="prefix"]
Label
- Field with label
-
vaadin-select[has-label] - Label
-
vaadin-select::part(label) - Label text
-
vaadin-select> label - Required indicator
-
vaadin-select::part(required-indicator)
Helper and Validation Error
- Field with helper
-
vaadin-select[has-helper] - Helper
-
vaadin-select::part(helper-text) - Helper text
-
vaadin-select> [slot="helper"] - Invalid field
-
vaadin-select[invalid] - Error message
-
vaadin-select::part(error-message) - Error message text
-
vaadin-select> [slot="error-message"]
Overlay
- Overlay element
-
vaadin-select-overlay - Overlay background
-
vaadin-select-overlay::part(overlay) - Overlay list box wrapper
-
vaadin-select-overlay::part(content)
Items
- Item element
-
vaadin-select-item - Selected item
-
vaadin-select-item[selected] - Item selection indicator
-
vaadin-select-item::part(checkmark) - Item selection indicator icon
-
vaadin-select-item::part(checkmark)::before - Focused item
-
vaadin-select-item[focused] - Item content wrapper
-
vaadin-select-item::part(content) - Hovered item
-
vaadin-select-item:hover