How to add linebreak in label?

App Building
1

Hello,

Is there a way to add linebreak within label of, for example Select component?

I can't find a way.

Thanks for any suggestions!

2

Hi @heynoway, we cannot add a line breaks to any label. This is intended, to follow W3 web accessibility: "In general, placing labels above the form fields helps reduce horizontal scrolling for people with low vision and mobile device users." Adding line breaks would increment horizontal scrolling.

That being said, if you would like to achieve this look, we could use a "Container" component, and use a "Text" component as a 'label' since it would allow multi line text.

On the container, set the "Show header" property for the "Header" add-on to false, or completely remove the add-on, set the background color to transparent, and remove "Padding" & border ("Show border"checkbox).

Add a "Text" component to the container and use it as a label.

Here is a screenshot of the container with those settings:


Note: This workaround is not ideal for web accessibility.
​

3

Thanks @Paulo.

My use case is more for labels on the left side of the box. I know I can create workaround but in my case it would be very handy to have possibility to add linebreak as it's used in the list view and should appear for some elements only.