Textarea
複数行のテキスト入力エリア。住所・自己紹介・お問い合わせ内容など、長文テキストを入力させるときに使う。
インストール
npx shoji add textarea
プレビュー
改行を含む日本語でも、行間に余裕を持って読み返せます。
Content patterns
住所補足のように、1行では足りない可能性がある入力に使います。
目安: 200文字以内。箇条書きや改行をそのまま残せます。
States
お問い合わせ内容は10文字以上で入力してください
パターン
With Counter
残り文字数 (n/200) をリアルタイム表示。上限超過時は赤色で警告するツイッター式カウンター。
textareacharacter-countlimit
0 / 200
Auto Resize
入力行数に応じて高さが自動伸長するテキストエリア。チャット入力・コメント欄で必須のパターン。
textareachatauto-height
使い方
こんなときに使う
- 住所・備考・コメントなど、改行を含む可能性がある入力
- 自己紹介・説明文など、文字数が多くなる入力
- メール本文・メッセージ本文の作成
使わないほうがいい場面
- 氏名・電話番号など1行で収まる入力（Input を使う）
- resize="none" を安易に指定する（ユーザーが自分で広げられなくなる）
JP 最適化のポイント
- min-h-24（96px）でデフォルト高さを確保 — 日本語は英語より1行あたりの情報量が多いため、最低2〜3行見える高さが必要
- leading-relaxed（1.625）を適用 — IME 変換中の下線テキストと確定後テキストが混在しても読みやすい行間