ラジオボタン Radio Button

複数の選択肢から一つだけを選ぶための排他的選択コントロール。

使用場面: 性別選択・支払い方法・配送オプションなど排他的な選択が必要な場合 採用例: Google Forms, Amazon

ライブデモ

配送方法を選択通常配送 3〜5営業日（無料）速達配送 1〜2営業日（+500円）当日配送現在ご利用いただけません

ソースコード

<fieldset class="demo-radio">
  <legend class="demo-radio-legend">配送方法を選択</legend>
  <label class="demo-radio-item">
    <input type="radio" name="demo-shipping" value="standard" class="demo-radio-input" checked />
    <span class="demo-radio-circle"></span>
    <span class="demo-radio-body">
      <span class="demo-radio-label">通常配送</span>
      <span class="demo-radio-desc">3〜5営業日（無料）</span>
    </span>
  </label>
  <label class="demo-radio-item">
    <input type="radio" name="demo-shipping" value="express" class="demo-radio-input" />
    <span class="demo-radio-circle"></span>
    <span class="demo-radio-body">
      <span class="demo-radio-label">速達配送</span>
      <span class="demo-radio-desc">1〜2営業日（+500円）</span>
    </span>
  </label>
  <label class="demo-radio-item demo-radio-disabled">
    <input type="radio" name="demo-shipping" value="same-day" class="demo-radio-input" disabled />
    <span class="demo-radio-circle"></span>
    <span class="demo-radio-body">
      <span class="demo-radio-label">当日配送</span>
      <span class="demo-radio-desc">現在ご利用いただけません</span>
    </span>
  </label>
</fieldset>

.demo-radio { position: relative; border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.demo-radio-legend { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 8px; }
.demo-radio-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px;
  border: 2px solid #e5e7eb; border-radius: 10px; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.demo-radio-item:hover { border-color: color-mix(in srgb, var(--ui-primary) 50%, transparent); }
.demo-radio-item:has(.demo-radio-input:checked) {
  border-color: var(--ui-primary);
  background: color-mix(in srgb, var(--ui-primary) 5%, #fff);
}
.demo-radio-item.demo-radio-disabled { opacity: 0.5; cursor: not-allowed; }
.demo-radio-input { position: absolute; opacity: 0; width: 0; height: 0; }
.demo-radio-circle {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #d1d5db; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s;
}
.demo-radio-circle::after {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ui-primary); transform: scale(0);
  transition: transform 0.2s ease;
}
.demo-radio-input:checked + .demo-radio-circle { border-color: var(--ui-primary); }
.demo-radio-input:checked + .demo-radio-circle::after { transform: scale(1); }
.demo-radio-body { display: flex; flex-direction: column; gap: 2px; }
.demo-radio-label { font-size: 14px; font-weight: 500; color: #333; }
.demo-radio-desc { font-size: 12px; color: #6b7280; }

AIプロンプト

ラジオボタンをHTML/CSSで作ってください。複数の選択肢から一つを選べるコントロールです。

以下の仕様でラジオボタンを実装してください。
- カード型レイアウト（各選択肢がカードになる）
- 選択時にボーダーカラーが変わるアニメーション
- プライマリカラー: #2563eb
- 各選択肢に説明テキスト付き
- 無効（disabled）状態のスタイル
- 選択時に内側の丸がスケールインするアニメーション

アクセシビリティ対応のラジオボタングループを実装してください。
- fieldset/legendによるグループ化
- 矢印キーで選択肢を切り替え
- aria-describedby で各選択肢の詳細説明をリンク
- フォーカスリングの視認性確保
- prefers-reduced-motion 対応
- エラー時の role="alert" による通知
- 横並び/縦並びのレスポンシブ切り替え

← カタログに戻る