本文へ移動

メニュー

インプットテキスト概要

スクリーンショット:ラベル、要否ラベル、サポートテキストのパーツで構成されるインプットテキスト。Lサイズ、Mサイズ、Sサイズの3パターン。

テキスト入力コンポーネントは、名前や電話番号など、1行以内のテキストを入力する場合に使用します。

仕様

パーツ

スクリーンショット:インプットテキストを構成する各パーツに、それぞれ①②③④⑤の番号を割り付けている。①はテキストの入力フィールド。②は入力フィールドと対になるテキストの項目ラベル。入力フィールドの上に左寄せで配置。③は赤文字の要否ラベル。項目ラベルの後ろに配置。④はサポートテキスト。ラベルと入力フィールドの間に配置。⑤は赤文字のエラーテキスト。入力フィールドの下に左寄せで配置。
  1. 入力フィールド(必須)
  2. 項目ラベル(必須)
  3. 要否ラベル
  4. サポートテキスト
  5. エラーテキスト

使い方

設計の原則

  • 入力フィールドの横幅は、言葉の長さに合わせて調整してください。入力すべきものをより直感的にわかりやすくできます。
  • サポートテキストは入力例や入力に必要な説明を記入することで利用者の入力を補助できます。

良い例

スクリーンショット:市区町村のインプットテキストおよび電話番号のインプットテキスト。電話番号のインプットテキストは、市区町村のものよりも小さい幅で表示されている。

入力フィールドが入力すべきテキストの長さに合っている

悪い例

スクリーンショット:市区町村のインプットテキストおよび電話番号のインプットテキスト

全ての入力フィールドが同じ長さになっている