ng-zorro-antd
ng-zorro-antd copied to clipboard
Optional floating input placeholders when input focused or not empty
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 :
Or something like this (modified primeng by me):
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'
orundefined
: 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.