NG-ZORRO/ng-zorro-antd

Optional floating input placeholders when input focused or not empty

Opened this issue · 0 comments

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.