Allow for a separate placeholder and label for the text input

[varungupta85]

I wanted to suggest a feature for this component and get some feedback from the users of the component. I think traditionally one may create a text input component by having a separate label and a text input component and the text input component could have a placeholder which may instruct the user what needs to be inputted or some example of valid inputs. With this component, we are going away from an explicit label and specifying the label as part of the text input itself due to which it is not really possible to specify a placeholder for the text input as it would conflict with the label in the rendered component.

I was thinking if it would make sense to add functionality such that if both placeholder and label are specified, then if the text input box is empty, the placeholder is shown and if the text input box has some valid value, the label is shown. By doing this, we can have placeholder such as Enter name of the product as placeholder and Product Name as the label. The placeholder provides a clear instruction to the user what is needed and once the user enters the product name, the label Product Name is shown as expected. Just having Product Name as the placeholder when the text input box is empty may sometimes be confusing to a very layman user.

Additionally, if the placeholder is not specified, we fallback to the current behavior. So, it is not going to break any existing code as the placeholder and label can't be used together right now.

[halilb]

Thanks for your time and contribution @varungupta85!

I don't think I understand the purpose of this work. Are you suggesting a new user experience for more of a structural proposal. Could you post some code snippets or examples for the things you've suggesting?

[varungupta85]

It is more of a structural proposal. Currently, we can't specify a placeholder for the different text inputs that this package provides as it would be overlaid with the label and won't look right. We can specify a label but at some places, just having a label doesn't suffice and we need a placeholder to instruct the user what needs to be done. For e.g., the placeholder may contain a sample format for the input, or it may say enter your name in upper case etc. In such cases, it may be helpful to show a placeholder in the text input box without the label to begin with and as the user starts typing, the label is shown.

I don't have any examples to share but I hope I conveyed my point.