Floating Label (フローティングラベル)
別名 Float label, Animated placeholder
フィールドにフォーカスが当たるか入力があると、プレースホルダーのラベルが上へ移動して小さくなります。
使いどころ
フォーム、ログイン入力欄
バリエーション
- focus float
- not(:placeholder-shown)
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にフローティングラベル(Floating Label)を追加してください。フロートラベル(float label)、アニメーションプレースホルダー(animated placeholder)とも呼ばれます。
フィールドにフォーカスが当たるか値が入ると、中にあるラベルがなめらかに素早く上へ移動しながら縮んでフィールドの上端に乗り、フィールドが空でフォーカスもないときだけ元に戻るようにしてください。
入力欄に関連付けた本物のラベルのままにし、フィールドの高さが変わらずフォームがずれないようにしてください。