RadioGroup

複数の選択肢から1つだけ選ぶ選択コントロール。性別・支払い方法・プランなど、排他的な選択が必要なときに使う。

インストール

npx shoji add radio-group

プレビュー

契約プラン

個人開発・小さな検証に向いた買い切りプランです。

複数人で同じブロックを使う開発チーム向けです。

Usage

使い方

こんなときに使う

  • 選択肢が2〜5件で、1つだけ選ぶ必要がある場合
  • 選択肢を常時表示して比較させたい場合（Select より選びやすい）
  • 「はい / いいえ」「公開 / 非公開」などの2択

使わないほうがいい場面

  • 選択肢が6件以上の場合（Select のほうがコンパクト）
  • 複数選択が必要な場合（Checkbox を使う）

JP 最適化のポイント

  • 視覚サイズ size-5（20px）にして視認性を向上 — 日本語ラベルと並んだときのバランスを考慮
  • after 疑似要素で 44px タッチターゲットを確保 — 小さいラジオボタンでもスマートフォンでタップしやすい