Sharing Styles with Component Types

Information on configuring styles for use among multiple components 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: Text Fields, Number Fields and Combo Boxes, etc.

Multiple 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 instead apply the part or state selectors to it:

: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 CSS selectors described in this section 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]
Field with error message: [has-error-message]
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.

Input Field Borders

Borders can be easily enabled on all input field components by providing a non-zero value to the --vaadin-input-field-border-width CSS property. Using the default Lumo colors, this provides WCAG 2.1 level AA conformant contrast between the background and the field surface.

You can override the default border color with the --vaadin-input-field-border-color property.

These properties can be set globally by applying them to the html selector, or scoped to any element using a more specific CSS selector.

/* Applies borders to all fields,
   and overrides default color to blue: */
html {
  --vaadin-input-field-border-width: 1px;
  --vaadin-input-field-border-color: blue;
}

/* Applies border only to fields with 'bordered-field' classname: */
.bordered-field {
  --vaadin-input-field-border-width: 1px;
}

5d170f51-2d45-475e-ba03-e8c04722074e

Docs