Input field label with icon

I am looking to set the label on an input field to include an icon with a tooltip on it for more information about the field. We are using Vaadin 14 today, is it easier to do on a newer Vaadin version?
I found an old Stackoverflow post about this but wondering if there’s a better way of doing it?

A similar question just came up two days ago

Can I set the label slot through Java?

Yeah that would be possible (even tho a neat API is missing to add a custom "native"label from the server side @useful-whale :smirk:)

yup, appending a custom label element and setting the slot="label" attrib on it should work, and you can use a bit of JS to associate it to the input with aria-labelledby (and in 24.1 you’ll be able to do that with a dedicated java API)

there have also been some vague plans to introduce a toggletip and/or helper-toggle feature to input fields, that would render an info button very similar to that either next to the label, or, more likely, next to the field, that, when clicked, would show a tooltip or toggle the helper text

I have tried to do this but failed, could someone help me with a code snippet to get me started?

TextField someField = new TextField();
Div richLabel = new Div(VaadinIcon.ABACUS.create(), new Text("I'm a label!"));
richLabel.getElement().setAttribute("slot", "label");

How is this done with the dedicated API you mentioned in Vaadin 24.1 @useful-whale ?

continuing on the example above:


Thanks :slightly_smiling_face: