コンポーネント / forms

forms · @awesome-ds/react

Select

ラベルとエラーを備えたネイティブ選択欄。

関連ルール: rule.a11y.wcag-aa

状態マトリクス

通常必須
無効必須
エラー必須

構造

  • ラベル
  • select要素
  • 選択肢
  • エラーメッセージ

キーボード操作契約

OS標準のキー操作と先頭文字検索を維持します。

スクリーンリーダー契約

ラベル、現在の選択肢、補足、エラー、無効状態を通知します。

コンテンツ規則

  • 見分けやすい選択肢名を使います。
  • 無効なplaceholderだけに説明を依存しません。

公開API

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

環境適応契約

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

検証ID

Select/native-options

ライブ表示

ライブ表示

コピー可能な実装例

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

<Select id="role" label="Role"><option>Admin</option></Select>