placeholderの補足テキストを入力欄に残しておく方法

はじめに

みなさん、入力フォームを作るとき、Placeholderのテキストを入力欄に残しておきたいときってありませんか？
個人的に、Placeholderの補足テキストが入力時にも表示されていると、配慮が行き届いているなと感じます。
そこで今回は、この実装方法について共有したいと思います。

前提

この記事では、tailwindcssを使った実装例を紹介します。

ポイント

・peerを使う。
className内にpeerが記述されているものが選択されたとき、それをトリガーとしてデザインを変えることができる。
・peerを指定するタグのplaceholder（今回だとinputタグ）は空にしておく。

実装例

入力フォーム部分のコンポーネントです。

input.tsx

const Input = () => {
  return (
    // inputタグとlabelタグの位置を揃えるには、親タグのclassNameにrelativeを指定する
    <div className="relative">
      <input
        className="
          block
          rounded-md
          px-6
          pt-7
          pb-3
          w-full
          text-md
          text-white
          bg-neutral-700
          appearance-none
          focus:outline-none
          focus:ring-0
          peer
        "
        // この空のplaceholderがないと、カーソルを合わせる前から文字が小さくなってしまう。
        placeholder=""
      />
      <label
      // 入力時はplaceholderの文字が上側に表示されるようにする
      className="
        absolute
        text-md
        text-zinc-400
        duration-150
        transform
        -translate-y-3
        scale-75
        top-5
        z-10
        origin-[0]
        left-5
        peer-placeholder-shown:scale-100
        peer-placeholder-shown:translate-y-0
        peer-focus:scale-75
        peer-focus:-translate-y-4
      "
      htmlFor="email">
        Email
      </label>
    </div>
  )
}
export default Input

ブラウザ画面

初期状態

入力時

最後に

peerを使えば、色々なことが実現できそうですよね！
少しでも参考になれば嬉しいです。
公式ドキュメントも豊富なので、ぜひ色々調べてみてください！
tailwindcss_公式ドキュメント