kaze風
Textarea
テキストエリア
プレビュー
使いどころ
使う場面
- コメント、問い合わせ内容、備考など、複数行にわたる自由入力
- 文字数に上限があるとき。FormField の maxLength と currentLength でカウンターを出す
- 入力量が分からないとき。rows を指定して、初期の高さを決める
使わない場面
- 1 行で収まる入力。Input を使う
- 書式のあるリッチな文章（太字、リンク）。Textarea は書式なしのテキストだけ
- 選択肢のある入力。Select / Radio / Combobox を使う
使い方
<Textarea placeholder="メッセージ" />プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
error | boolean | false | エラー状態を表示するかどうか |
className | string | undefined | 追加のCSSクラス名 |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | テキストエリアにフォーカスを移す |
| Enter | 改行する（フォームは送信されない） |
アクセシビリティ
- ラベルは必ず用意する。FormField で包むと label と関連付く
- FormField の maxLength はカウンターを出すだけで、入力は止めない。textarea 自体にも maxLength を渡すこと
- error と aria-invalid の両方で赤枠が付く。エラー文言も添える
文言
- placeholder は入力例にとどめる。「詳細を入力してください」のようにラベルと同じ言葉を繰り返さない
- 上限があるときは description に書く（「500 文字まで」）。カウンターは入力中の目安