フローティングラベル — 動きの伝え方辞典

floating label

フローティングラベル

入力欄にフォーカスすると、プレースホルダー位置のラベルが上に浮き上がって縮む定番フォーム演出。ラベルが常に残るためプレースホルダー消失問題が起きない。フォーカスだけでなく「記入済み」判定まで入れて初めて完成する。

01 — Demo video

Play live →

02 — Prompt template

フォーム入力に floating label を実装してください。

- ラベルは<label>要素で実装し、初期状態ではプレースホルダー位置(入力テキストと同じ位置)に重ねる
- フォーカス時に transform: translateY(-{{rise}}px) scale({{scale}}) で浮き上がらせ、{{duration}}s の ease-out で動かす
- transform-origin: left を指定し、左端を固定したまま縮める(中央縮みは横ズレして見える)
- :focus-within(またはfocus/blurイベント)で発火させ、値が入っている間は :placeholder-shown の否定かJSの記入済み判定で、フォーカスが外れても浮かせたままにする
- font-sizeではなくscaleで縮める(リフロー禁止)
- ラベルには入力枠の線を隠す背景色を敷く
- prefers-reduced-motion 時はアニメーションなしで即座に位置を切り替える

フォーム入力に floating label を実装してください。

- ラベルは<label>要素で実装し、初期状態ではプレースホルダー位置(入力テキストと同じ位置)に重ねる
- フォーカス時に transform: translateY(-{{rise}}px) scale({{scale}}) で浮き上がらせ、{{duration}}s の ease-out で動かす
- transform-origin: left を指定し、左端を固定したまま縮める(中央縮みは横ズレして見える)
- :focus-within(またはfocus/blurイベント)で発火させ、値が入っている間は :placeholder-shown の否定かJSの記入済み判定で、フォーカスが外れても浮かせたままにする
- font-sizeではなくscaleで縮める(リフロー禁止)
- ラベルには入力枠の線を隠す背景色を敷く
- prefers-reduced-motion 時はアニメーションなしで即座に位置を切り替える

フォーム入力に floating label を実装してください。

- ラベルは<label>要素で実装し、初期状態ではプレースホルダー位置(入力テキストと同じ位置)に重ねる
- フォーカス時に transform: translateY(-{{rise}}px) scale({{scale}}) で浮き上がらせ、{{duration}}s の ease-out で動かす
- transform-origin: left を指定し、左端を固定したまま縮める(中央縮みは横ズレして見える)
- :focus-within(またはfocus/blurイベント)で発火させ、値が入っている間は :placeholder-shown の否定かJSの記入済み判定で、フォーカスが外れても浮かせたままにする
- font-sizeではなくscaleで縮める(リフロー禁止)
- ラベルには入力枠の線を隠す背景色を敷く
- prefers-reduced-motion 時はアニメーションなしで即座に位置を切り替える

03 — Params

duration(浮き上がり時間 s) — 範囲 0.1〜0.5 / 初期 0.2
0.15〜0.25sが目安。入力操作への応答なので、0.3sを超えるとワンテンポ遅れて感じる。
rise(浮き上がり量 px) — 範囲 12〜32 / 初期 22
上に移動する距離。ラベルの中心が入力枠の上辺に乗るあたりが収まりがよい。
scale(縮小率) — 範囲 0.6〜0.9 / 初期 0.75
浮いた後のラベルの縮小率。0.7〜0.8で「見出しからラベルへ」の階層感が出る。

04 — Vocab

:focus-within — 子孫要素がフォーカスされている間、親に当たる擬似クラス。ラッパー側のCSSだけでラベルを動かせる。
:placeholder-shown — プレースホルダーが表示中(=未入力)の間だけ当たる擬似クラス。:not()と組み合わせると「記入済み」をCSSだけで判定できる。
transform-origin: left — 縮小の基準点を左端に固定する指定。ラベルが左揃えのまま小さくなり、横ズレしない。
記入済み判定 — フォーカスが外れても値があればラベルを浮かせたままにする判定。これが漏れるとラベルと入力値が重なる事故になる。

05 — NG → OK examples

言い方: 「「プレースホルダーをおしゃれに動かして」」

なぜNG: フォーカスで浮くだけの実装が高確率で返ってきて、文字を入れたままフォーカスを外すとラベルが入力値に重なって戻る「記入済み判定漏れ」が起きる。font-sizeを直接アニメーションさせるガタつく実装も多い。

言い方: 「「floating labelを:focus-withinで。translateY(-22px) scale(0.75)、0.2s ease-out、transform-origin: left。値が入っていれば浮かせたまま」」

なぜOK: 移動量・縮小率・origin・記入済み判定まで指定。「値が入っていれば浮かせたまま」の一言が実用品質を分ける。