テキストエリア (Textarea)

複数行のテキスト入力に使用する、サイズや機能をカスタマイズ可能なテキストエリアコンポーネントです。

基本

基本的な使用

基本のCode:

<div>
  <label class=“label” for=“basic-textarea”>コメント</label>
  <textarea id=“basic-textarea” class=“textarea textarea-md” placeholder=“コメントを入力してください…”></textarea>
</div>

サイズ

サイズバリエーション

サイズのCode:

<!— 小さいサイズ —>
<textarea class=“textarea textarea-sm” placeholder=“小さいテキストエリア”></textarea>

<!— 標準サイズ —>
<textarea class=“textarea textarea-md” placeholder=“標準のテキストエリア”></textarea>

<!— 大きいサイズ —>
<textarea class=“textarea textarea-lg” placeholder=“大きいテキストエリア”></textarea>

リサイズ制御

リサイズオプション

リサイズ制御のCode:

<!— リサイズ不可 —>
<textarea class=“textarea textarea-md textarea-resize-none”></textarea>

<!— 縦方向のみ（デフォルト） —>
<textarea class=“textarea textarea-md textarea-resize-vertical”></textarea>

<!— 横方向のみ —>
<textarea class=“textarea textarea-md textarea-resize-horizontal”></textarea>

<!— 両方向 —>
<textarea class=“textarea textarea-md textarea-resize-both”></textarea>

文字数カウント

文字数制限付き

0 / 100
0 / 200
この項目は必須です

文字数カウントのCode:

<div class=“textarea-group”>
  <label class=“label” for=“counter-textarea”>メッセージ（最大100文字）</label>
  <textarea 
    id=“counter-textarea” 
    class=“textarea textarea-md” 
    maxlength=“100” 
    placeholder=“メッセージを入力してください…”
    oninput=“updateCounter(this, ‘counter1’, 100)”
  ></textarea>
  <div id=“counter1” class=“textarea-counter”>0 / 100</div>
</div>

実用的なパターン

お問い合わせフォーム

0 / 500
具体的な状況や要望をお書きください

コメント投稿

0 / 140

お問い合わせフォームのCode:

<div class=“space-y-4”>
  <div>
    <label class=“label label-required” for=“inquiry-subject”>件名</label>
    <input type=“text” id=“inquiry-subject” class=“input input-md” placeholder=“お問い合わせの件名” />
  </div>
  <div class=“textarea-group”>
    <label class=“label label-required” for=“inquiry-message”>お問い合わせ内容</label>
    <textarea id=“inquiry-message” class=“textarea textarea-md” maxlength=“500” rows=“6”></textarea>
    <div class=“textarea-counter”>0 / 500</div>
  </div>
</div>

コメント投稿のCode:

<div class=“textarea-group”>
  <label class=“label” for=“comment-text”>コメント</label>
  <textarea 
    id=“comment-text” 
    class=“textarea textarea-sm textarea-resize-none” 
    maxlength=“140” 
    rows=“3”
  ></textarea>
  <div class=“textarea-counter”>0 / 140</div>
</div>

アクセシビリティ

  • • テキストエリアには対応するlabel要素を適切に関連付け
  • • placeholderは指示ではなくヒントとして使用
  • • エラー状態ではaria-invalidとaria-describedbyを使用
  • • maxlength属性でスクリーンリーダーに文字数制限を通知
  • • 文字数カウンターはaria-live="polite"で動的更新を通知
  • • キーボード操作（Tab、Shift+Tab）で順序通り移動可能
  • • 十分なクリック領域を確保（最小44x44px）
  • • 必須項目は視覚的・プログラム的に明示
このテキストエリアはスクリーンリーダーに対応しています