Text field テキストフィールド（インプットテキスト）

デモ

別名

• Text input — Carbon Design System
• Input — Ant Design
• インプットテキスト — デジタル庁デザインシステム

見分けるポイント

枠線または下線のある長方形で、上にラベルがある。下に補足やエラーの文が出ることが多い。

挙動

• クリックまたは Tab でフォーカスするとカーソルが出て、文字を入力できる。
• ラベルは常に見えるようにする。placeholder は入力を始めると消えるため、ラベルの代わりにはしない。
• 補足の文は aria-describedby でつなぎ、スクリーンリーダーがラベルと一緒に読み上げるようにする。

キーボード操作

使い分け・注意点

• プレースホルダーをラベルや補足説明の代わりにしない。
• 入力欄の幅は、想定する入力の長さに合わせる。
• エラーメッセージには、何が問題でどう直せばよいかを書く。

似た部品との違い

• コンボボックス: テキストフィールドには候補がなく、コンボボックスは選べる候補のリストが付く。
• テキストエリア: テキストフィールドは短い1行を入力し、テキストエリアは複数行の文章を入力する。
• 検索ボックス: 検索ボックスは検索語を入れるためのテキストフィールドで、検索ボタンや検索のランドマークが付くことが多い。

出典

• Carbon Design System: Text input (最終確認日: 2026-10-20)
• Ant Design: Input (最終確認日: 2026-10-20)
• デジタル庁デザインシステムウェブサイト「インプットテキスト」をもとに作成 (最終確認日: 2026-10-20)