setting Text component properties

Flow
1

I want to set the maximum length of text to 20 characters.
I also font the font size to be 22 px.
How do I do that in Vaadin 14?
Any insight will be very helpful.
Thanks
Kumar

2

I want to set the maximum length of text to 20 characters

textField.setMaxLength(20);

Or set “maxlength” property with Element API

textField.getElement().setProperty("maxlength", 20);

See client side API here: https://vaadin.com/components/vaadin-text-field/html-api/elements/Vaadin.TextFieldElement

I also font the font size to be 22 px.

You should do this by css. I.e. you need to create css file for TextField styles, say “my-text-field-styles.css” in your frontend/styles folder and then import it with @CssImport(value = “./styles/my-text-field-styles.css”, themeFor=“vaadin-text-field”)

In the file you should target the styles either to input-field or value part

[part="input-field"]
 {
    // styles for input element, e.g. background color works better here
}

[part="value"]
 {
    // styles for value, perhaps the font setting goes better here
}
3

Thank you! setting length on TextField component works great! I was struggling with Text component earlier.
I still cannot set the font styles. @CssImport is not available. Which maven dependency I should include in the pom in order to use @CssImport ?
Any insight is highly appreciated!

4

The following approach works for me. Just an FYI:
txtField.getElement().getStyle().set(“font-size”, “35px”);