Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Optional floating input placeholders when input focused or not empty #8499

Open
D-Biela opened this issue Apr 16, 2024 · 0 comments
Open

Optional floating input placeholders when input focused or not empty #8499

D-Biela opened this issue Apr 16, 2024 · 0 comments

Comments

@D-Biela
Copy link

D-Biela commented Apr 16, 2024

What problem does this feature solve?

It would be highly beneficial to include floating labels in form inputs, such as input fields and tree-selects. Floating labels enhance user experience by saving screen space and improving form aesthetics. Labels would initially display inside the input box as placeholders and then transition above the input box when the user starts typing or selects a value.

See: https://primeng.org/floatlabel :
image
image

Or something like this (modified primeng by me):
image
image

What does the proposed API look like?

Introduce an additional attribute in the nz-input directive to control the behavior of the placeholder. The new attribute could be named placeholderDisplay, with possible values:

  • 'showWhenEmpty' or undefined: Current default behavior where the placeholder is not floating and disappears when a value is present.
  • 'floatWhenFocussed': The placeholder floats above the input when it is focused, similar to the PrimeNG implementation.
  • 'floatWhenNotEmpty': The placeholder begins to float when a value is present in the input.

This approach allows developers to tailor placeholder behavior according to the specific needs of their application, enhancing both functionality and interface aesthetics.

@D-Biela D-Biela changed the title Optional floating input placeholders when input focussed or not empty Optional floating input placeholders when input focused or not empty Apr 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant