Sharing Styles among Component Types

Common to All Input Fields

The same block of CSS can be applied in a number of ways to multiple component types. For instance, you might want the same CSS for all text input fields like Text Fields, Number Fields and Combo Boxes.

Multiple separate selectors can be specified for the same CSS by separating them with commas, like so:

vaadin-text-field::part(input-field), vaadin-number-field::part(input-field) {
  background: white;
  border: 1px solid gray;
}

To avoid repeating the same part or state selector for each root element, you can wrap the element types in a :where and apply the part or state selectors to that, instead:

:where(vaadin-text-field, vaadin-number-field)::part(input-field) {
  background: white;
  border: 1px solid gray;
}

If you know that all components with a particular part or state should get the same CSS, you can even omit the root element entirely:

::part(input-field) {
  background: white;
  border: 1px solid gray;
}

The above example applies the CSS to input-field parts in all components that have one.

Common to All Input Fields

The following CSS selectors can be used to target common features in all Vaadin input field components, simultaneously.

States

Required: [required]
Focused: [focused]
Keyboard focused: [focus-ring]
Read-only: [readonly]
Disabled: [disabled]
Not empty: [has-value]

Field

Field surface (background, border): *::part(input-field)
Clear button: *::part(clear-button)
Clear button icon: *::part(clear-button)::before

Label

Field with label: [has-label]
Label: *::part(label)
Required indicator: *::part(required-indicator)

Helper & Validation Error

Field with helper: [has-helper]
Helper: *::part(helper-text)
Invalid field: [invalid]
Error message: *::part(error-message)

Note	Universal Selector is Optional The universal selector `*` can be omitted in the above selectors. It’s used here only to make the shadow part selectors easier to understand.

Documentation