# How to Implement Floating Labels in WeWeb Forms?

**URL:** <https://community.weweb.io/t/how-to-implement-floating-labels-in-weweb-forms/17428>\
**Category:** How do I?\
**Created:** [March 24, 2025, 8:38pm UTC](https://community.weweb.io/t/how-to-implement-floating-labels-in-weweb-forms/17428 "2025-03-24T20:38:46Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![BenGiordano](https://avatars.discourse-cdn.com/v4/letter/b/c4cdca/32.png) [@BenGiordano](https://community.weweb.io/u/BenGiordano)\
**Post date:** [March 24, 2025, 8:38pm UTC](https://community.weweb.io/t/how-to-implement-floating-labels-in-weweb-forms/17428/1 "2025-03-24T20:38:46Z")

</div>

Hello everyone,  
I’m new to WeWeb, and I don’t speak English very well, so I apologize if I make any mistakes.

I’m trying to implement **Floating Labels** in a WeWeb form, but I couldn’t find a built-in option for this behavior.

🎯 **What I want to achieve:**

- When a user **clicks on an input field** , the placeholder should move **above the input field** , acting as a label.
- If the field is empty, the label should return to its original position inside the field.
- This is a common UX pattern used in many modern forms (Google Material Design, Bootstrap, etc.)

**Example of Expected Behavior:**

1️⃣ Before clicking on the input:

markdown

CopiaModifica

```auto
-----------------------
| Enter your name | <- Placeholder inside
-----------------------

```

2️⃣ After clicking (or when a value is entered):

markdown

```auto
Name
-----------------------
| John Doe | <- Label moves up
-----------------------

```

1️⃣ Is there a **native way** in WeWeb to achieve this Floating Label effect?  
2️⃣ Can WeWeb detect if an input field is **empty or filled** without writing custom JavaScript?  
3️⃣ If I must use CSS, is there a recommended way to structure the form fields in WeWeb?

Thanks in advance for any suggestions! 🚀

Ben

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [March 24, 2025, 9:17pm UTC](https://community.weweb.io/t/how-to-implement-floating-labels-in-weweb-forms/17428/2 "2025-03-24T21:17:23Z")

</div>

You can do this with states and position absolute. There also is an “advanced placeholder” option on WeWeb’s native inputs.

---

<div class="post-metadata">

**Author:** ![BenGiordano](https://avatars.discourse-cdn.com/v4/letter/b/c4cdca/32.png) [@BenGiordano](https://community.weweb.io/u/BenGiordano)\
**Post date:** [March 25, 2025, 8:37am UTC](https://community.weweb.io/t/how-to-implement-floating-labels-in-weweb-forms/17428/3 "2025-03-25T08:37:30Z")

</div>

Thank you for your response Broberto.

I have checked WeWeb’s native inputs, but I **can’t find the “Advanced Placeholder” option**. Could you please guide me on where to locate it?

Additionally, I would love some more details on the **states and position absolute** approach.

🔹 **For the “Advanced Placeholder”:**

- Is it a built-in option for all input fields?
- How does it work? Does it automatically move the placeholder above the input when the user types?

🔹 **For the “States + Absolute Position” method:**

- Do I need to manually create a label and move it with a WeWeb state when the input is focused?
- Could you share an example setup or a small step-by-step guide?

I am new to WeWeb, so any detailed explanation or example would be really helpful! 😊

Thanks in advance for your support!

---

<div class="post-metadata">

**Author:** ![BenGiordano](https://avatars.discourse-cdn.com/v4/letter/b/c4cdca/32.png) [@BenGiordano](https://community.weweb.io/u/BenGiordano)\
**Post date:** [March 25, 2025, 1:48pm UTC](https://community.weweb.io/t/how-to-implement-floating-labels-in-weweb-forms/17428/4 "2025-03-25T13:48:26Z")

</div>

**Thank you for your suggestion!** 🙌

I successfully implemented the **floating label effect** by using **States** as you suggested.

📌 **What I did:**

- I created a label positioned **absolutely** inside the input container.
- I added a **WeWeb state** that checks if the input field has a value.
- When the input is **focused or contains text** , the label moves up using the **Animations panel**.
- When the input is **empty** , the label returns to its original position.

It works **smoothly and looks great**! Thanks again for the help. 🚀

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [March 25, 2025, 8:18pm UTC](https://community.weweb.io/t/how-to-implement-floating-labels-in-weweb-forms/17428/5 "2025-03-25T20:18:55Z")

</div>

BenGiordanoGPT

---

<div class="post-metadata">

**Author:** ![BenGiordano](https://avatars.discourse-cdn.com/v4/letter/b/c4cdca/32.png) [@BenGiordano](https://community.weweb.io/u/BenGiordano)\
**Post date:** [March 26, 2025, 7:27am UTC](https://community.weweb.io/t/how-to-implement-floating-labels-in-weweb-forms/17428/6 "2025-03-26T07:27:27Z")

</div>

Haha, Broberto, you got me! 😆 AI definitely helps me write better English and communicate more clearly. Plus, it’s a lifesaver for finding solutions in WeWeb! 🚀

By the way, your suggestion about using **States** was the main input that led AI to the solution, so thanks again! 🙌

If you have any further insights on the **“Advanced Placeholder”** option you mentioned, I’d love to explore it. The AI solution works well, but it’s quite time-consuming, and applying it to all forms takes a lot of effort.

Any extra tips would be much appreciated!

---

<div class="post-metadata">

**Author:** ![Bycadavr](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/bycadavr/32/14951_2.png) [@Bycadavr](https://community.weweb.io/u/Bycadavr)\
**Post date:** [August 17, 2025, 6:00pm UTC](https://community.weweb.io/t/how-to-implement-floating-labels-in-weweb-forms/17428/7 "2025-08-17T18:00:37Z")

</div>

Hey guys, i’m new to WeWeb and i’m not a developer, i’m a designer 🙂 i’m trying to create a similar idea input with floating label with moving it Up on focus/onClick.

Do i go in right direction with placing a floating label as text + default input (width 100% and height 100%) without default styling wrapping it in a container with borders to look like an input?

How do i use states to create on focus here? do i set it for a text label or for the input itself?

thanks

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/906b01f148c0feba00139ee7d6ce4b107e6f934e.png)