Material-UI という React コンポーネントライブラリを使用しているのですが、今回はテキスト入力欄の TextField 要素のラベルを常に float させる方法についてです。
公式サイトの TextField のページを見てもらえれば分かるのですが、TextField のラベルはデフォルト状態だと、下記の画像のように Placeholder のように表示され、フォーカスが当たるとヌルっと動いて入力欄の上部に移動する、という挙動です。
が、個人的にはラベルは最初から入力欄の上部にいてほしいし、フォーカスが当たったときに動くのがあまり好みではなかったので修正しました。
修正方法ですが、TextField の InputLabelProps プロパティに shrink: true を追加するだけです。
サンプルコードは下記のとおりです。
<TextField
label="Label float"
InputLabelProps={{ shrink: true }} />
3行目に InputLabelProps プロパティを追加し、shrink: trueを指定しました。
こちらを実際に表示したところ、ラベルが常に入力欄上部に固定されるようになりました！
なお、variant="filled" や variant="outlined" 等を追加し、入力欄を枠線で囲むようなデザインの場合でも、問題なかったです。
以上、Material-UI の TextField 要素のラベルを常に float させる方法についてでした。
ご参考になれば幸いです。
