forms · @awesome-ds/react
Textarea
長文入力のためのラベル付き複数行フィールド。
状態マトリクス
通常
フォーカス
無効
エラー
構造
- ラベル
- 複数行入力
- 補足またはエラー
キーボード操作契約
標準の複数行編集を維持し、Enterは改行として扱います。
スクリーンリーダー契約
ラベルと補足またはエラーを複数行入力へ関連付けます。
コンテンツ規則
- 期待する内容と上限を示します。
- placeholderをラベルの代わりにしません。
公開API
| プロパティ | 型 | 必須 | 説明 |
|---|---|---|---|
id | string | 必須 | ラベルや説明と関連付ける一意なID。 |
label | string | 必須 | 利用者と支援技術へ示す名前。 |
hint | string | — | 入力へ関連付ける補足説明。 |
error | string | — | 入力へ関連付ける回復可能なエラー。 |
…native | TextareaHTMLAttributes<HTMLTextAreaElement> | — | 対応するネイティブ要素の標準属性。 |
環境適応契約
- RTL
- 論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。
- ハイコントラスト
- 背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。
- 動きを減らす設定
- 状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。
検証ID
ライブ表示
ライブ表示
コピー可能な実装例
import { Textarea } from "@awesome-ds/react";
<Textarea id="bio" label="Bio" />