forms · @awesome-ds/react
RadioGroup
名前付き候補から一つだけ選ぶグループ。
状態マトリクス
選択済み
未選択
構造
- fieldset
- legend
- ラジオ選択肢
キーボード操作契約
矢印キーで候補を移動し、Tabでグループへ出入りします。
スクリーンリーダー契約
legendでグループを命名し、各候補の選択状態を通知します。
コンテンツ規則
- 候補が相互排他的である場合に使います。
- 候補は簡潔で並列な表現にします。
公開API
| プロパティ | 型 | 必須 | 説明 |
|---|---|---|---|
legend | string | 必須 | 選択肢グループを説明する見出し。 |
name | string | 必須 | ネイティブフォームのグループ名。 |
options | RadioOption[] | 必須 | 選択可能な候補。 |
value | string | — | 外部から制御する現在値。 |
onChange | (value: string) => void | — | 値の変更を受け取るコールバック。 |
環境適応契約
- RTL
- 論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。
- ハイコントラスト
- 背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。
- 動きを減らす設定
- 状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。
検証ID
ライブ表示
ライブ表示
コピー可能な実装例
import { RadioGroup } from "@awesome-ds/react";
<RadioGroup legend="Plan" name="plan" options={[{value:'free',label:'Free'}]} />