コンポーネント / forms

forms · @awesome-ds/react

Input

ラベル、補足、エラーを関連付けた一行入力。

関連ルール: rule.a11y.wcag-aa, rule.components.state-matrix

状態マトリクス

通常必須
フォーカス必須
無効必須
エラー必須

構造

  • ラベル
  • テキスト入力
  • 補足
  • エラーメッセージ

キーボード操作契約

標準の文字入力・選択・Tab移動を維持します。

スクリーンリーダー契約

ラベル、補足、入力エラー、無効状態を入力欄へ関連付けます。

コンテンツ規則

  • 求める値が分かるラベルを使います。
  • エラーでは修正方法を具体的に示します。

公開API

プロパティ型必須説明
idstring必須ラベルや説明と関連付ける一意なID。
labelstring必須利用者と支援技術へ示す名前。
hintstring—入力へ関連付ける補足説明。
errorstring—入力へ関連付ける回復可能なエラー。
…nativeInputHTMLAttributes<HTMLInputElement>—対応するネイティブ要素の標準属性。

環境適応契約

RTL
論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。
ハイコントラスト
背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。
動きを減らす設定
状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。

検証ID

Input/label-error-association

ライブ表示

ライブ表示

第三者には共有しません

コピー可能な実装例

import { Input } from "@awesome-ds/react";

<Input id="email" label="Email" error="Required" />