kaze風
Radio
ラジオボタン
プレビュー
使いどころ
使う場面
- 選択肢が 2 件から 5 件で、全部を見せて 1 つだけ選ばせるとき（プラン、支払い方法）
- 送信ボタンで確定するフォームの項目。選んだ時点では何も反映されない
- 選択肢の説明が長いとき。ラベルの下に補足を置ける
使わない場面
- 選択肢が 6 件以上。Select か Combobox を使う
- 選んだ瞬間に表示が切り替わる操作（一覧の表示形式）。SegmentedControl を使う
- 複数選択。Checkbox を使う
- オン・オフ。Checkbox か Switch を使う
使い方
<RadioGroup label="選択肢">
<Radio label="選択肢A" name="choice" value="a" />
<Radio label="選択肢B" name="choice" value="b" />
</RadioGroup>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
label | string | なし | ラジオボタンのラベル |
orientation | "horizontal" | "vertical" | なし | 並べる向き（horizontal は横、vertical は縦） |
error | boolean | false | エラー状態 |
errorMessage | string | なし | グループの下に出すエラー文言 |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | グループに入る。選択済みの項目、なければ先頭へ |
| ↑ / ↓ / ← / → | グループ内の選択を移す（ブラウザ標準の操作） |
| Space | フォーカス中の項目を選ぶ |
アクセシビリティ
- RadioGroup は fieldset と legend で、複数の Radio を 1 つのまとまりとして伝える。label が legend になる
- error と errorMessage を渡すと、各 Radio に aria-invalid と aria-describedby が付き、メッセージが結ばれる
- 同じ name を持つ Radio だけが 1 つのグループになる。RadioGroup の中でも各 Radio に同じ name を付ける
- 初期値を選んでおくか、未選択のまま送信を許すかを決める。一度選ぶと未選択には戻せない
文言
- 選択肢は互いに重ならない言葉にする。「その他」を置くなら最後
- グループの label は「支払い方法」のように、何を選ぶかを名詞で書く