RadioButton
input[type="radio"]要素の代替として選択肢から1つだけ選ばせる選択コンポーネントです。5個以下の選択肢をラベル短く一覧で見せるときに使います。
使用上の注意
ユースケースに応じてコンポーネントを使い分ける
選択肢が多すぎる場合は別のコンポーネントを検討する
基本的に、選択肢の中から単一の値を選択して入力させる場合は、初期状態で選択肢が一覧しやすいラジオボタンを使用します。
- 選択肢のラベルテキストが長大になる場合や、選択肢が表示領域内にすべて表示しきれないほど存在する場合では、SelectやSingleComboboxも検討します。
- ただし選択肢の一覧性が下がり、操作の手間が増えるので、選択肢の数が不定で予測できないなどの理由がない限りはラジオボタンの使用を推奨します。
選択操作に関わるコンポーネントの使い分けは選択コンポーネントの使い分けを参照してください。
選択肢のラベルテキストはなるべく簡潔に同程度の文量で収める
ラジオボタンのラベルテキストは、同程度の文量や行数になるように調整してください。 ラジオボタンは性質上、テキストの文量によって幅が変化します。極端に行数や文量の異なる選択肢が混ざると、ユーザーが視認できる領域の差異が大きくなるため、選択肢を間違える恐れがあります。
選択肢を適切に選択させるために補足説明のテキストやステータスラベルを含む複数の要素を追加したい場合や、ラベルテキストが短く画面内の他の要素と比べて認識しづらいなどの理由で、選択肢を視覚的に強調して表示したい場合はRadioButtonPanelを検討してください。
ビューの切り替えを操作するUIとして使用しない
ラジオボタンは入力後に、送信や保存といったtype属性がsubmitのボタンなどを押すことで入力内容が反映される場合に使用してください。
ラジオボタンは1クリックで選択肢ごとに異なる結果となるため、誤入力によって意図しない結果が反映されてしまう可能性あります。
コレクションなどでオブジェクトの表示方法を切り替える場合や、表示領域上submitのボタンの配置が難しい場合など、即時反映を前提とする箇所ではTabBarやSegmentedControl、またはSwitchを使用してください。
ラジオボタンの並び順
横幅に十分なスペースがある場合は、基本的に横並びにすることで縦幅が長くなりすぎることを防ぎます。
ただし、選択肢の文字が長くなる場合は縦並びを検討します。
ラジオボタン内に操作可能な要素を含めない
ラジオボタン内には、ヘルプページへのリンクやInputなど、ユーザーが値を選択する以外の操作可能な要素は配置しないでください。 これらを配置してしまうと、ユーザーがフォーム入力するための操作難易度が上がり、誤操作などにつながるためです。（※1）
- リンクを置きたい場合は、Fieldsetの
helpMessagepropsなどを使用します。 - Comboboxなどで選択肢に応じて段階的に別の操作をさせたい場合は、RadioButtonと
disabled状態を組み合わせるか、ステップを複数に分けたモードを検討します。
状態
デフォルト
RadioButtonは常に1つの選択肢が選択されているコンポーネントのため、選択肢の中から1つデフォルト値に設定するものを決めてください。（参考：デフォルト値に設定する値）
デザインパターン
選択肢のグルーピング
例えば設定画面などで、チェックボックスやラジオボタンのように複数の選択肢を持つ項目を、いくつも並べて表示する場合は、ラベルがかかる範囲や設定項目ごとの選択肢を区別しやすくするためにBaseColumnでグルーピングする場合があります。
共通設定の操作権限項目のデザインパターンもあわせて参考にしてください。
アクセシビリティ
開発時の考慮点
テーブルのセル内に直接配置しない
テーブル内にRadioButtonを配置する場合は、専用のコンポーネント（TdRadioButton）を使用してください。
セル内に直接RadioButtonコンポーネントを配置すると、RadioButtonと同じ行のテキストが関連付かず、スクリーンリーダーでは「どの項目を選択するためのRadioButtonか」がわかりにくくなる場合があります。
TdRadioButtonを利用することで、RadioButtonと同じ行のテキストが関連付けられ、スクリーンリーダーを使用するユーザーにも、どの項目を選択するためのRadioButtonかが伝わりやすくなります。
詳しい実装方法と注意点については、以下のTableコンポーネントのドキュメントを参照してください。
Fieldsetでグループ化する
RadioButtonは、複数の選択肢から1つだけ選択するためのコンポーネントです。
Fieldsetコンポーネントを使用してグループ化し、legend propsでグループの目的を説明してください。
これにより、関連するRadioButtonを「同じ質問に対する選択肢のグループ」としてスクリーンリーダーへ正しく伝えられます。
良い実装例
悪い実装例
ラベルが関連付けられていない場合、スクリーンリーダーでは「ラジオボタン」とだけ読み上げられ、何を選択するためのラジオボタンかわかりません。 また、グループ化されていない場合、何について選択するための選択肢なのかが伝わりにくくなります。
関連ページ
モバイル
モバイル表示時は、画面の幅が狭いため基本的に縦並びにします。誤操作を防ぐために、小さい要素間のマージンに従って十分なマージンを確保してください。
使い方チェックリスト
- Should選択肢の中から単一の値を選択して入力させる場合は、基本的にラジオボタンを使用する
- 選択肢の数が不定で予測できないなどの理由がない限りはラジオボタンの使用を推奨する
- Should選択肢のラベルテキストが長大、または選択肢が表示領域に収まらないほど多い場合は Select や SingleCombobox も検討する
- Mustラジオボタンのラベルテキストは同程度の文量や行数になるように調整する
- Should選択肢に補足説明やステータスラベルなど複数要素を追加したい場合や、選択肢を視覚的に強調したい場合は RadioButtonPanel を検討する
- Mustラジオボタンは入力後に `送信` や `保存` などの type="submit" のボタンを押すことで内容が反映される場合に使用する
- Must即時反映を前提とする箇所では TabBar や SegmentedControl、または Switch を使用する
- Should横幅に十分なスペースがある場合は基本的に横並びにする
- 選択肢の文字が長くなる場合は縦並びを検討する
- Mustリンクを置きたい場合は Fieldset の `helpMessage` props などを使用する
- Avoidラジオボタン内には、ヘルプページへのリンクや Input など、ユーザーが値を選択する以外の操作可能な要素を配置しない
- ShouldCombobox などで選択肢に応じて段階的に別の操作をさせたい場合は、RadioButton と `disabled` 状態の組み合わせ、またはステップを複数に分けたモードを検討する
- Must選択肢の中から 1 つデフォルト値に設定するものを決める
- Should複数の選択肢を持つ項目をいくつも並べて表示する場合は、ラベルがかかる範囲や設定項目ごとの選択肢を区別しやすくするため BaseColumn でグルーピングする
- MustFieldset コンポーネントを使用してグループ化し、`legend` props でグループの目的を説明する
- Must誤操作を防ぐため、小さい要素間のマージンに従って十分なマージンを確保する
- Shouldモバイルでは画面幅が狭いため基本的に縦並びにする
Props
Propsは設定されていません。
関連リンク
参考文献
※1. <label>: The Label element - HTML: HyperText Markup Language | MDN別タブで開く