menuMDUIDocs
color_lens
Material Design 3 と Web Components をベースにした新しい mdui 2 がリリースされました。mdui 2 ドキュメントはこちら。

テキストフィールド

テキストフィールドは通常、フォームで使用されます。mdui のテキストフィールドには、文字数カウントやフォームバリデーションなどの機能があります。

グリッドレイアウトシステムと組み合わせてフォームレイアウトを作成できます。

使用方法

ページ読み込み後に自動的に初期化されます。動的に生成されたテキストフィールドの場合は、初期化のために mdui.mutation() を呼び出す必要があります。

カラー

アクセントカラーを使用します。

関連情報

Material Design デザインガイドライン：コンポーネント - テキストフィールド

スタイル

単一行テキストフィールド

最もシンプルなテキストフィールドの例です：

codeplay_arrow
例
<div class="mdui-textfield">
  <input class="mdui-textfield-input" type="text" placeholder="User Name"/>
</div>

固定ラベル

codeplay_arrow
例
<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text"/>
</div>

浮動ラベル

codeplay_arrow
例
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" />
</div>

無効状態

.mdui-textfield-input 要素に disabled 属性を追加することで、テキストフィールドを無効にできます。

codeplay_arrow
例
<div class="mdui-textfield">
  <input class="mdui-textfield-input" type="text" disabled placeholder="User Name"/>
</div>

<!-- 固定ラベル -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text" disabled />
</div>

<!-- 浮動ラベル -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" disabled />
</div>

多行テキストフィールド

単一行テキストフィールドの input タグを textarea タグに置き換えると、多行テキストフィールドになります。多行テキストフィールドは、内容の高さに合わせて自動的にテキストフィールドの高さを調整します。

codeplay_arrow
例
<div class="mdui-textfield">
  <textarea class="mdui-textfield-input" placeholder="Description"></textarea>
</div>

<!-- 固定ラベル -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">Subject</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- 浮動ラベル -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- 無効状態 -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Disabled</label>
  <textarea class="mdui-textfield-input" disabled></textarea>
</div>

textarea に rows 属性を追加すると、テキストフィールドの高さが固定されます。

codeplay_arrow
例
<div class="mdui-textfield">
  <textarea class="mdui-textfield-input" rows="4" placeholder="Message"></textarea>
</div>

ヘルプテキスト付き

<div class="mdui-textfield"></div> の内部の末尾に <div class="mdui-textfield-helper"></div> 要素を追加することで、ヘルプテキストを追加できます。

codeplay_arrow
例
<div class="mdui-textfield">
  <input type="email" class="mdui-textfield-input" placeholder="Email" />
  <div class="mdui-textfield-helper">Helper Text</div>
</div>

アイコン付き

codeplay_arrow
例
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">email</i>
  <input class="mdui-textfield-input" type="email" placeholder="Email"/>
</div>

<!-- 固定ラベル -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">account_circle</i>
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" />
  <div class="mdui-textfield-helper">Helper Text</div>
</div>

<!-- 浮動ラベル、多行テキストフィールド -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <i class="mdui-icon material-icons">textsms</i>
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- 無効状態 -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">lock</i>
  <input class="mdui-textfield-input" type="text" placeholder="Disabled" disabled/>
</div>

展開可能なテキストフィールド

codeplay_arrow
例
<div class="mdui-textfield mdui-textfield-expandable">
  <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </button>
  <input class="mdui-textfield-input" type="text" placeholder="Search"/>
  <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">close</i>
  </button>
</div>

<div class="mdui-textfield mdui-textfield-expandable mdui-float-right">
  <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </button>
  <input class="mdui-textfield-input" type="text" placeholder="Search"/>
  <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">close</i>
  </button>
</div>

機能

フォームバリデーション

mdui は HTML5 を使用してフォームバリデーションを行います。<div class="mdui-textfield"></div> の内部の末尾に <div class="mdui-textfield-error"></div> 要素を追加することで、エラーメッセージを追加できます。

エラーメッセージとヘルプテキストの両方を含める場合は、ヘルプテキストの要素をエラーメッセージ要素の後に配置する必要があります。

codeplay_arrow
例
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" required />
  <div class="mdui-textfield-error">ユーザー名は空にできません</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" required />
  <div class="mdui-textfield-error">メールの形式が正しくありません</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Password</label>
  <input
    class="mdui-textfield-input"
    type="text"
    pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$$"
    required
  />
  <div class="mdui-textfield-error">パスワードは少なくとも6文字以上で、大文字と小文字を含める必要があります</div>
  <div class="mdui-textfield-helper">少なくとも6文字以上で、大文字と小文字を含むパスワードを入力してください</div>
</div>

HTML5 のフォームバリデーション以外にも、JavaScript を使用して検証を行うことができます。

検証に失敗したテキストフィールドに .mdui-textfield-invalid クラスを追加し、検証に成功した後にそのクラスを削除します。

codeplay_arrow
例
<div class="mdui-textfield mdui-textfield-invalid">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" />
  <div class="mdui-textfield-error">ユーザー名が既に存在します</div>
</div>

文字数カウント

input 要素に maxlength="" 属性を追加すると入力文字数を制限でき、mdui はテキストフィールドの右下にリアルタイムの文字数カウントを自動的に追加します。

codeplay_arrow
例
<div class="mdui-textfield">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" maxlength="20" />
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" maxlength="60" />
  <div class="mdui-textfield-error">メールの形式が正しくありません</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input" maxlength="140"></textarea>
</div>

動的に生成されたテキストフィールド

テキストフィールドが動的に生成される場合は、初期化のために mdui.mutation() を呼び出す必要があります。

テキストフィールドの内容を動的に変更した場合は、テキストフィールドを再初期化するために mdui.updateTextFields() メソッドを呼び出す必要があります。このメソッドは、引数として .mdui-textfield クラスを含む CSS セレクター、DOM 要素、または DOM 要素の配列を受け取り、指定されたテキストフィールドのみを再初期化できます。引数を渡さない場合は、ページ内のすべてのテキストフィールドが再初期化されます。

CSS クラス一覧

クラス名説明
.mdui-textfieldテキストフィールドを定義します。
.mdui-textfield-floating-label浮動ラベルテキストフィールドを定義します。
.mdui-textfield-labelテキストフィールドのラベルを定義します。
.mdui-textfield-inputテキストフィールドの入力ボックスを定義します。
.mdui-textfield-errorフォームバリデーションのエラーメッセージを定義します。
.mdui-textfield-helperテキストフィールドのヘルプテキストを定義します。
arrow_backPrevious
折りたたみパネル
arrow_forwardNext
選択コントロール