Thread by @Wktr

How to create custom inputs in @bubble⭐️

All with no-code, no custom states and no workflows.

🧵👇

#nocode #bubble #bubbleio #ui #buildinpublic

Step 1

Create a ”Align to Parent” group.

This will allow us to add elements with different z-index which we will need for the text to both me non-clickable but also on top of the input element.

Step 2

Add a text element.

The order here is important❗️

If you were to add the input element first, the text would be above the input and users would not be able to click the text to write, not good.

Step 2.1

Add styling to the text element:
- Fit width to content
- Fit height to content
- Left margin 12
- Padding left: 2
- Padding right: 2
- Background color: Same as your background

Step 3

Add an input element.

Don’t forget to remove the placeholder. Our text element are acting as a placeholder in this case!

Step 4

Now the fun starts.

Add a condition to the text ”When Input is focused or Inputs value is not empty” then:
- Change font color
- Font size
- Top Margin

🔴 Tip: Use the margins and font size to try how much you need to move the text before adding it to the conditions.

It moves but doesn’t look great…

Let’s fix that!

Step 5

Add transition properties to the text:

- Font Color
- Font Size
- Top Margin

Also, don’t forget to add a ”Border Color” transition to the input element.

Looks better but the text is off once going over the input element.

Again, we need the text to be under the input for users to be able to click the text to start the input.

However once the input is focused, we want the text to be above the input instead.

Let’s fix that!

Step 6

Copy & Paste the text element

Add stylings:
- Background color: 0%
- Remove text

Add condition:
- Text once input is focused. (Same text as placeholder)
- Background color: Same as your background

That’s it! 🎉

You can now play around with some more conditions to make it even better.

For example: Change the font color once Inputs value is not empty & Input is not focused.

Hope you enjoyed this tutorial!

If you like to see more tips from me, don’t forget to follow to stay updated @Wktr 👋