docs: Floating label (input / textarea) animation works only when placeholder is set on form tag

[alorence]

On which page do you see this issue?

https://flyonui.com/docs/forms/input/#floating-label

Describe the issue

Hello, and thank you very much for your amazing work on FlyonUI !

I am a bit confused with the use of floating labels.

I see a difference between using them on inputs & textarea with placeholder attribute vs. no placeholder. The focus animation, moving the label from the middle of the component to the top only works when a placeholder attribute is defined on the input (even an empty one).

As soon as the placeholder is removed from the input, the animation is not triggered anymore. I can reproduce this behavior from the docs using browser developer tools to remove placeholder attribute.

Is this an expected behavior? Do you think it could be added to the documentation? I just spent a huge amount of time finding why this didn't work on my project, and finally spotted the need for placeholder attribute ^

Best regards !

What browsers are you seeing the problem on?

Chrome

[github-actions]

Hi @alorence

Thank you for your support in helping us improve FlyonUI!

We’ve received your submission and will respond within few business days. Our team handles issues one at a time, and we’ll be reviewing yours as soon as possible.

In the meantime, any additional details or a reproducible example would be greatly appreciated and will help us resolve the issue more efficiently.

Thank you for your patience and understanding!

[yagnikvamja]

Hello @alorence ,

Thank you for your detailed report - you’re absolutely right!

The floating label animation in FlyonUI depends on the presence of the placeholder attribute. This is because the CSS used to trigger the label movement typically relies on the :placeholder-shown selector, which only works when a placeholder is present (even if it's just an empty string). Without a placeholder, the CSS can't detect the empty state correctly, so the label won’t animate to the top on focus.

if you’re using floating labels, please include a placeholder attribute on the input (e.g., placeholder=" ").

We can also consider clarifying this behavior in the documentation so others don't run into the same confusion - great feedback! 🙌

~Best regards,

[alorence]

Thanks @yagnikvamja for your answer. I just opened a PR on flyonui-docs to clarify this point.

Best regards

[yagnikvamja]

Hello @alorence ,

Thank you very much for taking the time to submit a PR - we truly appreciate your initiative!

At the moment, the FlyonUI documentation does not have a public repository, so we’re unable to accept external contributions directly. We will ensure this point is clearly addressed in the official documentation in a future release.

Thanks again for your support and helpful feedback!

~Best regards,