UI Component Lab English

← コンポーネント一覧

入力

Radio ラジオボタン

丸いボタンのグループから、選択肢を1つだけ選ぶ部品。

配送方法

別名

見分けるポイント

ラベルの横に小さな丸が縦や横に並ぶ。選んだものだけ、丸の中に点が入る。

挙動

  • 選択肢を選ぶと、同じグループで前に選んでいたものは外れる。
  • 一度選ぶと、どれも選ばれていない状態には戻せない。
  • Tab ではグループ全体が1か所として扱われ、グループ内は矢印キーで移動すると同時に選ばれる。

キーボード操作

キー動作
Tabグループ（選ばれている選択肢）へ入る、またはグループから出る。
↓ / →次の選択肢を選ぶ。最後からは最初に戻る。
↑ / ←前の選択肢を選ぶ。最初からは最後に戻る。
Spaceフォーカス中の選択肢を選ぶ。

使い分け・注意点

  • 一度選ぶと選択を外せないため、任意の質問には「あてはまるものはない」などの選択肢を加える。
  • 丸はラベルの左に置く。
  • チェックボックス: ラジオボタンは1つだけ選び、チェックボックスはいくつでも選べる。
  • セレクトボックス: ラジオボタンはすべての選択肢を常に見せ、セレクトはリストにしまって場所を取らない。
  • リストボックス: ラジオボタンは選択肢ごとにラベル付きで全部を見せ、リストボックスはスクロールでき Tab では1か所として扱われる。

出典