CODEWITHSUNDEEP
vaadintextfieldvaadin-flowvaadin23
alexanoid
alexanoid

Reputation: 25790

Vaadin 23 change text color for TextField component

In case of error, I need to change the text of TextField to var(--lumo-error-text-color)

I tried the following:

textField.getStyle().set("color", "var(--lumo-error-text-color)");

but it doesn't work. How to properly change the text color of TextField component?

Upvotes: 1

Views: 654

Answers (2)

Henry
Henry

Reputation: 620

Since the text field is slotted, I don't believe you can set it's color property inline. You can add/remove a class name and use the method suggested above. Just have one class set the text to error color and the other class set it back to the regular color.

Upvotes: 0

Rolf
Rolf

Reputation: 2388

That does work just fine for me. However, assuming you want all TextFields to have red text when they're invalid, that really would be more appropriate to handle in CSS: Just add the following block to your styles.css:

vaadin-text-field[invalid]::part(input-field) {
  color: var(--lumo-error-text-color);
}

Or, if you want that across all text input fields, skip the element name:

[invalid]::part(input-field) {
  color: var(--lumo-error-text-color);
}

Upvotes: 3

Related Questions