1

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?

alexanoid
  • 24,051
  • 54
  • 210
  • 410

2 Answers2

3

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);
}
Rolf
  • 2,178
  • 4
  • 18
  • 29
  • Thanks for your answer! Unfortunately this is not related to the validation aspect. I just need to be able to do this on demand on a concrete fields (not all) – alexanoid Aug 22 '22 at 10:27
  • How to add this style inline to the component? – alexanoid Aug 22 '22 at 11:28
  • Well, like mentioned above your code does work just fine for me. But, as Henry below suggests, you could also apply a css classname (e.g. "my-invalid") to the textfield and write the css as: vaadin-text-field.my-invalid::part(input-field) { color: var(--lumo-error-text-color); } – Rolf Aug 23 '22 at 16:48
0

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.

Henry
  • 600
  • 2
  • 7
  • 22