Textarea

textarea要素の代替としてテキストを複数行で入力させるコンポーネントです。長文を入力させるとき、文字数カウンタが必要なときに使います。 入力によって自動で領域が広がる機能を備えています。

使用上の注意

適切なサイズに調整して使用する

入力する内容をあらかじめ精査し適切なサイズになるよう調整して使用してください。

適切なサイズは以下の判断基準を参考にしてください。

• Textareaはデフォルトで2行分の高さが確保され、幅を超えると改行されますが、幅と高さが小さいと入力内容が確認しづらくなります。十分なサイズを確保してください。幅はwitdh props、高さはrows propsで指定します。
• 入力によって自動で高さが広がって良い場合は、autoResize propsを指定します。
• 高さを自動て広げつつ上限を設定する場合は、maxRows propsを指定します。
• 入力する内容の文字数の予測が付く場合、過剰に高さを確保しないでください。わかりづらくなったり、視線誘導の妨げになってしまうことがあります。
• フォーム全体で見たときにレイアウトに統一性がなく感じられるときは、他の要素とのバランスを考慮してサイズを調整してください。

入力できる文字数に上限がある場合は入力文字数を表示する

入力できる文字数の上限が決まっている場合はmaxLetters propsを指定し、上限に応じた幅と高さに調整してください。

ユースケースに応じてコンポーネントを使い分ける

一行のテキスト入力が想定される場合は使用しない

氏名やメールアドレスなどの一行のテキスト入力にはInputを使用してください。

データの編集や送信を伴わない画面では使用しない

データの編集や送信を伴わない画面でデータを表示する場合はDefinitionListを使用してください。

入力項目の説明や例をプレースホルダで表示しない

入力項目の説明や例を載せる場合はFormControlのヘルプメッセージ（helpMessage）や入力例（exampleMessage）などを用い別途表示してください。

状態

無効（disabled）

入力を受け付けない状態を表現したスタイルです。通常は編集ができるが一時的または権限の制約により編集ができない場合に使用します。

ユーザーはなぜ無効になっているのかわからないことがあります。権限による表示制御のデザインパターンを参考にして、そもそも無効ではなくフォーム自体を非表示にしたり、無効状態の理由を付近に表示することを検討してください。

アクセシビリティ

基本的なアクセシビリティ機能

文字数制限の状態を通知する

maxLetters を設定した場合、現在の入力文字数や残り入力可能文字数が表示されます。

また、スクリーンリーダーを使用するユーザーにも入力中の状態変化が通知されます。文字数制限を超えた場合は、自動的にエラー状態となり、入力内容に問題があることが伝わります。

開発時の考慮点

FormControlと併用する

Textareaコンポーネントは必ずFormControlコンポーネントと併用して、ユーザーが何を入力すべきかを示すラベルを設定してください。FormControlと併用することで、支援技術にも入力の目的が伝達されます。

eslint-plugin-smarthrのsmarthr/a11y-input-in-form-control別タブで開くルールは、TextareaにFormControlを組み合わせることを促すものです。支援技術に入力の目的が伝わらないリスクを防ぐため、有効にして使用することを推奨します。

関連ページ

• 入力する内容や、操作がラベルとして表示されている | アクセシビリティガイドライン
• フォームパーツにアクセシブルネームがある | アクセシビリティガイドライン
• エラーの発生とエラーの内容が特定できる | アクセシビリティガイドライン
• 関連するフォームパーツは隣り合う位置に配置する | 弱視・ロービジョンのユーザビリティチェックリスト

モバイル

「適切なサイズに調整して使用する」を基本として、モバイルでは以下を考慮してください。

• 一部のモバイル向けブラウザでは、Textareaのフォントサイズが16px未満の場合、入力時に画面が拡大表示されることがあります。意図しない拡大を避けるため、TextareaのフォントサイズはM以上を使用してください。
• 一部のモバイル向けブラウザでは、ユーザーによるTextareaのリサイズに対応していないことがあります。Textarea内でスクロールが発生すると操作しづらくなるため、autoResize propsを指定し、maxRows propsは指定しないことを推奨します。

使い方チェックリスト

Textarea

参照元：使用上の注意 > 適切なサイズに調整して使用する 「使用上の注意 > 適切なサイズに調整して使用する」の本文へ移動

• Must

  入力する内容をあらかじめ精査し適切なサイズになるよう調整して使う

  • 幅は `width` props、高さは `rows` props で指定する。十分なサイズを確保する
  • 入力によって自動で高さが広がってよい場合は `autoResize` props を指定する
  • 高さを自動で広げつつ上限を設定する場合は `maxRows` props を指定する
  • 入力する内容の文字数の予測が付く場合、過剰に高さを確保しない
  • フォーム全体で見たときにレイアウトに統一性がなく感じられるときは、他の要素とのバランスを考慮してサイズを調整する

参照元：使用上の注意 > 入力できる文字数に上限がある場合は入力文字数を表示する 「使用上の注意 > 入力できる文字数に上限がある場合は入力文字数を表示する」の本文へ移動

• Must

  入力できる文字数の上限が決まっている場合は `maxLetters` props を指定し、上限に応じた幅と高さに調整する

参照元：使用上の注意 > ユースケースに応じてコンポーネントを使い分ける > 一行のテキスト入力が想定される場合は使用しない 「使用上の注意 > ユースケースに応じてコンポーネントを使い分ける > 一行のテキスト入力が想定される場合は使用しない」の本文へ移動

• Must

  氏名やメールアドレスなどの一行のテキスト入力には Input を使う

参照元：使用上の注意 > ユースケースに応じてコンポーネントを使い分ける > データの編集や送信を伴わない画面では使用しない 「使用上の注意 > ユースケースに応じてコンポーネントを使い分ける > データの編集や送信を伴わない画面では使用しない」の本文へ移動

• Must

  データの編集や送信を伴わない画面でデータを表示する場合は DefinitionList を使う

参照元：使用上の注意 > 入力項目の説明や例をプレースホルダで表示しない 「使用上の注意 > 入力項目の説明や例をプレースホルダで表示しない」の本文へ移動

• Avoid

  入力項目の説明や例をプレースホルダで表示しない

  • 説明や例を載せる場合は FormControl のヘルプメッセージ（`helpMessage`）や入力例（`exampleMessage`）などを用い別途表示する

参照元：状態 > 無効（disabled） 「状態 > 無効（disabled）」の本文へ移動

• Should

  無効状態の使用にあたっては、そもそも無効ではなくフォーム自体を非表示にしたり、無効状態の理由を付近に表示することを検討する

参照元：モバイル 「モバイル」の本文へ移動

• Must

  モバイル向けブラウザでの意図しない拡大を避けるため、Textarea のフォントサイズは `M` 以上を使う
• Should

  モバイルでは `autoResize` props を指定し、`maxRows` props は指定しないことを推奨する

  • 一部のモバイル向けブラウザでは Textarea のリサイズに対応していないことがあり、Textarea 内でスクロールが発生すると操作しづらくなるため

Props