複数行のテキスト入力が可能なフィールド

Example#

Props#

<textarea>要素をベースにしています。 表にない属性もprop経由で使用できます。

NameTypeDefaultDescription
data-*
optional
string-Custom data attributes
disabled
optional
boolean-フィールドを無効化する
isInvalidbooleanfalse値が不正であることを示す

Usage#

Label

<label> とセットでマークアップしてください。次の点でメリットがあります:

  • クリック/タップエリアが拡張されます。<label>をクリック/タップすることで、フィールドにフォーカスが移動します。
  • スクリーンリーダーのユーザーが、そのフィールドが何を表しているのかを理解できます
  • <label> の代わりに aria-labelledby で他要素のテキストを参照することもできます(できるだけ<label>を使用してください)

ID属性を経由して<label>とフィールドを紐付けます(例では<Input>を使用しています)。

<label htmlFor="some-filed">ラベル</label>
<Input id="some-field" />

ID属性は、ページで固有の値を指定する必要があります。

Placeholder#

placeholder属性を指定した場合、未記入のフィールドに指定したテキストが表示されます。placeholderにはいくつかのデメリットが存在するため、使用は避けましょう。

  • 何かしらの値を入力した時点で表示されなくなります
  • あらかじめシステムによって値が入力されていた場合も表示されません

また、一般にPlaceholderは薄いグレーのテキストで表現される場合が多くあります。ユーザーが読みづらいスタイリングです。一方、より濃いテキストでPlaceholderを表現すると入力された値と見分けがつかなくなる問題が存在します。

Keyboard Interaction#

  • フォーカスを受け取ります