浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React】Material-UIのTextField要素のラベルを常にfloatさせる

Material-UI という React コンポーネントライブラリを使用しているのですが、今回はテキスト入力欄の TextField 要素のラベルを常に float させる方法についてです。

公式サイトの TextField のページを見てもらえれば分かるのですが、TextField のラベルはデフォルト状態だと、下記の画像のように Placeholder のように表示され、フォーカスが当たるとヌルっと動いて入力欄の上部に移動する、という挙動です。

が、個人的にはラベルは最初から入力欄の上部にいてほしいし、フォーカスが当たったときに動くのがあまり好みではなかったので修正しました。

 

修正方法ですが、TextFieldInputLabelProps プロパティに shrink: true を追加するだけです。
サンプルコードは下記のとおりです。

<TextField
  label="Label float"
  InputLabelProps={{ shrink: true }} />

3行目に InputLabelProps プロパティを追加し、shrink: trueを指定しました。
こちらを実際に表示したところ、ラベルが常に入力欄上部に固定されるようになりました!
なお、variant="filled"variant="outlined" 等を追加し、入力欄を枠線で囲むようなデザインの場合でも、問題なかったです。

 

以上、Material-UI の TextField 要素のラベルを常に float させる方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)