TextArea

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

Example#

Name	Type	Default	Description
isInvalid	`boolean`	`false`	有効でない入力を保持しているかどうか
disabled	`boolean`	`false`	フィールドを無効化するかどうか
data-* optional	`string`	`-`	Custom data attributes

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

クリック/タップエリアが拡張されます。<label>をクリック/タップすることで、フィールドにフォーカスが移動します。
スクリーンリーダーのユーザーが、そのフィールドが何を表しているのかを理解できます
- スクリーンリーダーの場合、入力欄がフォーカスされた場合に、<label> の内容が読み上げられます[^read-label]
<label> の代わりに aria-labelledby で他要素のテキストを参照することもできます（できるだけ<label>を使用してください）

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

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

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

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

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