モケラ

Tech Sheets

mokelab

MUI の TextField コンポーネント

最終更新日:2024-08-11

MUI の TextField コンポーネントは、テキスト入力フィールドを簡単に作成するためのコンポーネントです。

公式ドキュメント:Text Field

基本的な使い方

import TextField from "@mui/material/TextField"; // `@mui/material` からインポートします

const BasicTextField: React.FC = () => {
  return <TextField label="名前" variant="outlined" />; // タグを記述して使用します。
};

export default BasicTextField;

上記の例では、label プロパティを使用してフィールドのラベルを「名前」に設定し、variant プロパティでフィールドのスタイルをoutlined に設定しています。

一覧に戻る