Allow for a separate placeholder and label for the text input

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.

まず、コンポーネントに既存の label と placeholder の処理箇所を特定し、次に、空の状態と値が入力された状態でレンダリングされる input がどのように変化するかを確認します。placeholder と label に個別の値を指定でき、空の状態と値が入力された状態で要求された動作をし、placeholder がない場合は現在のフォールバックを維持できれば完了です。

索引モデルが issue の本文から書いたものです。