Textarea テキストエリア

デモ

別名

• Text area — Carbon Design System
• テキストエリア — デジタル庁デザインシステム

見分けるポイント

数行分の高さがある枠付きの長方形で、上にラベルがある。下に文字数が出ることが多く、右下の角に大きさを変えるつまみが付くこともある。

挙動

• Enter を押すとフォームが送信されず、改行になる。
• 見えている行数より長くなると、欄の中でスクロールする。
• このデモは残りの文字数を表示する。上限を超えても入力は止めず、何文字超えているかを示す。

キーボード操作

使い分け・注意点

• 自由記述は書く手間が大きい。「その他」を選んだ人にだけ尋ねるなど、先に質問の範囲を絞る。
• 文字数の上限はラベルに書く。上限がおよそ20文字を超えるなら、文字数のカウンターを常に表示する。
• エラーが出て初めて上限が分かる作りにしない。超えたときは、入力済みの文字数とあわせてエラーで知らせる。
• 高さは想定する回答の長さに合わせる。

似た部品との違い

• テキストフィールド（インプットテキスト）: テキストエリアは複数行の文章を入力し、テキストフィールドは短い1行を入力する。

出典

• MDN: <textarea> (最終確認日: 2026-10-20)
• GOV.UK Design System: Textarea (最終確認日: 2026-10-20)
• GOV.UK Design System: Character count (最終確認日: 2026-10-20)
• デジタル庁デザインシステムウェブサイト「テキストエリア」をもとに作成 (最終確認日: 2026-10-20)