TextArea
View on GitHub: Copmonent複数行のテキスト入力が可能なフィールド
Example#
Props#
<textarea>
要素をベースにしています。 表にない属性もprop経由で使用できます。
Name | Type | Default | Description |
---|---|---|---|
data-* optional | string | - | Custom data attributes |
disabled optional | boolean | - | フィールドを無効化する |
isInvalid | boolean | false | 値が不正であることを示す |
Usage#
Label
<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は薄いグレーのテキストで表現される場合が多くあります。ユーザーが読みづらいスタイリングです。一方、より濃いテキストでPlaceholderを表現すると入力された値と見分けがつかなくなる問題が存在します。
Keyboard Interaction#
- フォーカスを受け取ります