Wiktor Profile picture
Oct 31, 2022 12 tweets 6 min read Read on X
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 👋

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Wiktor

Wiktor Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(