Text Area

複数行にわたる長文を入力するフィールド。対応履歴メモ、AI要約の編集、SMS 本文作成などに使用します。

プレビュー(動作デモ)

実際に文字を入力できます。右下のハンドルから下方向にリサイズ可能(初期高さの 3 倍まで)。文字数カウンターは入力に応じてリアルタイム更新。

対応メモ (最大 4096 文字)

0 / 4096

右下のハンドルをドラッグすると下方向にだけリサイズできます (最大 3 倍まで)。最大高さを超えた分はフィールド内スクロール。

SMS 本文 (最大 200 文字)

0 / 200

200 文字に到達するとカウンターが赤くなり、それ以上は入力できなくなります (maxLength による強制制限)。

横幅

横幅は固定の variant を持たず、入力内容と配置場所に応じて決める。次の範囲内で選ぶ。

項目	値
最小幅	320px(これより狭いと多行入力で見苦しい)
最大幅	640px(これより広いと 1 行の可読性が落ちる)
迷った時のデフォルト	480px

範囲内で、フォーム列幅やレイアウトに合わせて調整する。

状態

Normal

Focus

Error

Disabled

import { TextArea } from "@/components/TextArea";

<TextArea
  inputSize="m"
  placeholder="メモを入力"
/>

仕様

サイズ・リサイズ

幅: 最小 320px / 最大 640px / 迷った時のデフォルト 480px(横幅セクション参照)
初期高さ: 120px (3〜4 行分)、最大高さ: 360px (画面占有率の上限)
右下のハンドルから縦方向のみリサイズ可能
最大高さを超える内容はフィールド内で縦スクロール

文字数制限

maxLength で最大文字数を強制 (ネイティブ <textarea maxLength>)
showCount を指定すると右下に 現在数 / 最大 形式のカウンターを表示
カウンターは上限到達で赤色 (--status-danger-normal) に変化
用途: 対応メモ等の長文は 4096、SMS 本文等は 200

状態

Normal: bg 白 / border #D1D5DB 1px
Focus: border #0066CC 2px (フィールド内のいずれかにフォーカスで点灯)
Error: border #E01E5A 1px。error プロップ指定で aria-invalid も自動付与
Disabled: bg #F5F7FA / text disabled、リサイズ不可

利用基準

使うべき時

入力内容が 20 文字を超え、改行を含む可能性がある場合
「要約」や「詳細」など情報量が予測できないプロパティの記述
文字数制限がある場合は maxLength と showCount を併用してリアルタイムフィードバック
プレースホルダーで具体的な書き出し例を提示する

使わない時

氏名・メールアドレスなど一行で収まる項目 → Input (Text Field) を使用
あらかじめ決まった選択肢の中から選ぶ → Select / Combobox を使用
パスワード等の機密情報 → Password Input を使用

Figma

Figma で Text Area コンポーネントを開く ↗