Label vs NativeLabel in 24.1

Hi, Flow 24.1 deprecates the Label component in favour of the new NativeLabel component.
When the Label will be removed from the library?
Should we replace all Label instances to NativeLabel?

The Label class will probably be removed in v25 since it’s a breaking change. (maybe someone from the product team will have a better answer)
Yes you should replace all your labels by native labels, but as a general advice you shouldn’t use Label if it’s not linked to a input.

I can’t stress this enough - if you have used Label in the past, I would highly guess that 95% of the usage is wrong and should not be changed to NativeLabel, but instead using Span, Paragraph, Div or Text. For what are you using it?

I understand Label can be misused, but if a label is linked to an input, should I use Label or NativeLabel?
I expect to use Label but it is deprecated. By the way, also the FormItem is using Label in the 24.1

If it’s technically linked to an Input: NativeLabel is the correct replacement :+1:

Thanks! Gonna create a issue for the component team


Is it the right way to change all from Label to Span? It seems that I use Label wrong (thousand times ;-)). THe goal would be to have the same styling, sizes, alignments without checking everything…

You should be able to replace all with span by a simple replacement. Make sure you have checked that you haven’t used e.g. “label.classname” in your Stylesheet. If you have used it soo much, it’s highly possible other elements like h* or paragraph would also make sense at some places (those come with different styles)

Perfect, thanks! Good to know :slightly_smiling_face:

Hi @wondrous-pug @quirky-zebra is right, but remember Vaadin’s Magic : Element API :

Element label = new Element(“label”);

Nobody is using that (hopefully) :shushing_face:

why not ?

For what use-case?

If you do need a label, for a custom compoent.

NativeLabel is the high level component / replacement

I just noticed that

Label wasn’t removed completely, it was deprecated and NativeLabel was added, so that people (who know what they are doing) can still do it without resorting to the element (low level) API

any way in general I meant that if you do need to create something out of standard , you can use the element API. which I called it Vaadin’s Magic.

Just noting here that this change is renaming. NativeLabel produces label tag in DOM. You do not need to use Element API for that.