RadioButtonPanel

RadioButtonをパネル型に視覚的強化した単一選択コンポーネントです。選択肢に説明やステータスを付加するとき、視覚的に強調して操作領域を確保するときに使います。

使用上の注意

以下のような場合にラジオボタンパネルを使用します。選択肢が同程度の長さで簡潔なラベルテキストのみの場合は、基本的にRadioButtonを使用してください。

選択操作に関わるコンポーネントの使い分けは選択コンポーネントの使い分けを参照してください。

ラジオボタンパネルは入力後に、送信や保存といったtype属性がsubmitのボタンなどを押すことで入力内容が反映される場合に使用してください。ラジオボタンパネルは1クリックで選択肢ごとに異なる結果となるため、誤入力によって意図しない結果が反映されてしまう可能性あります。

コレクションなどでオブジェクトの表示方法を切り替える場合など、即時反映を前提とする箇所ではTabBarやSegmentedControl、またはSwitchを使用してください。

ラジオボタンパネル内には、アンカーリンクやボタンなど、ユーザーが操作可能な要素は配置しないでください。これらを配置してしまうと、ユーザーがフォーム入力するための操作難易度が上がり、誤操作などにつながるためです。（※1）

リンクを置きたい場合は、FieldsetのhelpMessage propsなどを使用します。
Comboboxなどで選択肢に応じて段階的に別の操作をさせたい場合は、RadioButtonとdisabled状態を組み合わせるか、ステップを複数に分けたモードを検討します。

ユーザーは選択する操作に集中でき、それ
以外の操作と区別しやすい

Don't

ユーザーが選択操作に集中できず、操作難
易度が上がる

Should
選択肢に補足説明やステータスを付加する場合、または選択肢を視覚的に強調したい場合に RadioButtonPanel を使用する
- 選択肢を適切に選択させるために、補足説明のテキストやステータスラベルを含む複数の要素を追加したい場合
- ラベルテキストが短く画面内の他の要素と比べて認識しづらいなどの理由で、選択肢を視覚的に強調して表示したい場合
Should
選択肢が同程度の長さで簡潔なラベルテキストのみの場合は、基本的に RadioButton を使用する

Must
RadioButtonPanel は入力後に `送信` や `保存` などの type=submit ボタンを押すことで反映される場面で使用する
- 即時反映を前提とする箇所では RadioButtonPanel を使わず、TabBar / SegmentedControl / Switch を使用する

Avoid
RadioButtonPanel 内にアンカーリンクやボタンなど、ユーザーが操作可能な要素を配置しない
- リンクを置きたい場合は、Fieldset の `helpMessage` props などを使用する
- 選択肢に応じて段階的に別の操作をさせたい場合は、RadioButton と `disabled` 状態の組み合わせ、またはステップを複数に分けたモードを検討する

label必須

string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal