Vaadin 21 flow. NumberField width vs NumberField Input Field width

Question

How to set different width (shorter) for input field in NumberField than label or helper for this field.

NumberField numberField = new NumberField("Label");
numberField.setWidthFull(); // full width for the whole NumberField
// how to set width = 12rem for input field inside NumberField
// i try to 
numberField.getStyle().set("--input-field-width", "12rem");
//but its not working

Answer 1

You should be able to use CSS to theme the part="input-field". In your frontend folder, under the directory /frontend/themes/[your-theme]/components/ create the file vaadin-number-field.css if one doesn't exist already.

In that file, add this:

[part="input-field"] {
    width: 12rem;
}