反応と尾風によるフローティングラベル入力

私は、2011年のサインのページに取り組んでいますHyperlaunch 今週、いくつかの良いタッチを追加したい(第一印象カウント!).
これらのうちの1つは素敵な「浮動ラベル」入力をすることになっていました-あなたが材料UIなどで見るように、それはユーザー・サインインのような機能のために本当に素晴らしいパターンです.

あなたは、このアプローチがちょうど使用していると思うかもしれませんplaceholder 属性-しかし、残念なことに、それは少しのアクセシビリティ問題を引き起こすことがありえます.この方法はabsolute 代わりにラベルを配置-ので、画面の読者はまだフォームを正しく解釈することができます.このアプローチは、本当にUXゲームに微妙な移行を追加することができるという利点があります.
私の浮動小数点ラベルの入力を実装React and Tailwind CSS - を使うstate hook ユーザーアクションに基づいてクラス名を切り替えるには.
結果は良い、簡潔なコンポーネントです.

function FloatingLabelInput({ type, name, children }) {
  const [active, setActive] = React.useState(false);

  function handleActivation(e) {
    setActive(!!e.target.value);
  }

  return (
    <div className="relative border rounded mb-2 bg-gray-600 text-white border-white border-opacity-25">
      <input
        className={[
          "outline-none w-full rounded bg-transparent text-sm transition-all duration-200 ease-in-out p-2",
          active ? "pt-6" : ""
        ].join(" ")}
        id={name}
        name={name}
        type={type}
        onChange={handleActivation}
      />
      <label
        className={[
          "absolute top-0 left-0 flex items-center text-white text-opacity-50 p-2 transition-all duration-200 ease-in-out",
          active ? "text-xs" : "text-sm"
        ].join(" ")}
        htmlFor={name}
      >
        {children}
      </label>
    </div>
  );
}

これは以下のように使いやすい.<FloatingLabelInput name="username" type="text">Username</FloatingLabelInput>あなたは行動でそれを見ることができますmy Codepen