Can I create this type of effect in Thunkable?

[steve_synopsis]

Can I create this type of effect in Thunkable - with the text in the border of text input or label?

Certainly saves space on a screen.

[matt_conroy]

This looks like a fieldset element. Unfortunately, not something that could be done with any of our native UI components.

[tatiang]

It’s certainly possible to manually create a group with components and an image of the open border and then duplicate that group as needed:

Design:

Preview

Preview with copied group:

Image file (not fully transparent):

[tatiang]

And here’s a Layout that uses a button with a background image and text (km):

Project link: Thunkable
(See first screen)

I had to set the top margin of the button to -6 pixels (negative six) to achieve the overlap title effect. The advantage of a layout is that you can also create a custom Data Viewer List layout from it.

Modified image file (I made the area behind the gap in the border transparent instead of white):

[steve_synopsis]

Thanks. Much appreciated!

[matt_conroy]

@tatiang Brilliant work!