こんなUIは嫌だ！①【ラジオボタン編】

WebUI開発に携わっていく上でお客様に評判の悪い（悪かった）UIを自戒の念を込めて書いていきます。
何かの参考になれば幸いです。

Bootstrap v5.3を使用しています。

1. 無反応ラベル系

この画面で「ラジオ２」のラベル部分をクリックした時にどうなると思いますか？切り替わりますか？「丸」をクリックしたわけではないのでそのままですか？

サイトによってラベル部分が反応したりしなかったりします。

当たり前のことですが、ラベルの反応しないラジオボタンは非常に評判が悪いです。

このようにラジオボタンとラベルを並べて書くだけではラベルをクリックしても反応してくれません。

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="radio_silent_label" checked>
  <label class="form-check-label">ラベル無反応１</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="radio_silent_label">
  <label class="form-check-label">ラベル無反応２</label>
</div>

ラベルも反応させるようにするにはlabelタグでラジオボタンを囲むか"for"でラジオボタンとラベルを関連づける必要があります。

labelで囲む

ラジオボタンをlabelタグの内側に記入します。

<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="radio_label_around" checked>
    ラベル囲み１
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="radio_label_around">
    ラベル囲み２
  </label>
</div>

ラベルforで関連付け

labelにfor属性をつけて関連付けたいラジオボタンのidを指定します。

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="radio_label_for" id="radio-label-for-1" checked>
  <label class="form-check-label" for="radio-label-for-1">ラベルfor１</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="radio_label_for" id="radio-label-for-2">
  <label class="form-check-label" for="radio-label-for-2">ラベルfor２</label>
</div>

※ここではlabelをラジオボタンの直下に配置していますが、forでの関連付けはラベルが全く別のところにあっても有効です。

※disable時の違い

ちなみに上記の例ではdisabledにした時の挙動が違います。

『囲む』形式の場合、ラベルが不活性表示されていないことがわかります。

BootstrapのCSSを確認すると、『disabledなform-check-inputと同列にあるform-check-labelを不活性表示する』と記述されています。

.form-check-input:disabled~.form-check-label, .form-check-input[disabled]~.form-check-label {
    cursor: default;
    opacity: .5;
}

Bootstrapの推奨は、『ラジオボタンはラベルforで関連付けを行い、ラジオボタンとラベルは同列に配置する。』ということかもしれません。

2. 選ばれたのはどっち？系

ラジオボタンをBootstrapボタンでコーティングするケースは多いのではないでしょうか？
見た目がスタイリッシュになるし良いですよね。

では、下のラジオボタンは各々どっちが選択されているかわかりますか？

正解は両方とも『Radio 2』です。

ただ、１００人聞いて１００人がそう答えるわけではありません。※是非周りの方で試してみたください。

左

<div class="btn-group" role="group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off">
  <label class="btn btn-primary" for="btnradio1">Radio 1</label>
  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off" checked>
  <label class="btn btn-primary" for="btnradio2">Radio 2</label>
</div>

右

<div class="btn-group" role="group">
  <input type="radio" class="btn-check" name="btnradiooutline" id="btnradiooutline1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradiooutline1">Radio 1</label>
  <input type="radio" class="btn-check" name="btnradiooutline" id="btnradiooutline2" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradiooutline2">Radio 2</label>
</div>

『丸』見えるバージョン

やはりラジオボタンは『丸』が見えたほうが良い、という人のためにサンプルを作成します。
ちなみにラジオボタンのclassにある"btn-check"が『丸』を隠しているので、これを"btn-hybrid-check"に変更しました。
また、選択した時にボタン部分がハイライトされるようにCSSを追加します。

  .btn:has(.btn-hybrid-check:checked) {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
  }

<div class="btn-group" role="group">
  <label class="btn btn-outline-primary" for="btnhybridoutline1">
    <input type="radio" class="btn-hybrid-check" name="btnhybridoutline" id="btnhybridoutline1" autocomplete="off">
    Radio 1
  </label>
  <label class="btn btn-outline-primary" for="btnhybridoutline2">
    <input type="radio" class="btn-hybrid-check" name="btnhybridoutline" id="btnhybridoutline2" autocomplete="off" checked>
    Radio 2
  </label>
</div>

『丸』見えるバージョン（枠のみ）

いっそのことボタンは枠のみにしてラジオボタンの『丸』を目立たせた方が良いかもしれませんね。
radioのクラスを空にしています。

<div class="btn-group" role="group">
  <label class="btn btn-outline-primary" for="btnhybrid1">
    <input type="radio" name="btnhybrid" id="btnhybrid1" autocomplete="off">
    Radio 1
  </label>
  <label class="btn btn-outline-primary" for="btnhybrid2">
    <input type="radio" name="btnhybrid" id="btnhybrid2" autocomplete="off" checked>
    Radio 2
  </label>
</div>

ボタンでコーティングした際もラジオボタンの『丸』は見えたほうが良いかもしれません。

まとめ

• ラジオボタンはラベルforで関連付けを行い、ラジオボタンとラベルは同列に配置する
• ボタンでコーティングした際もラジオボタンの『丸』は見えたほうが良い

※あくまで個人的なお勧めです、何かのご参考になれば幸いです。