こんなUIは嫌だ！②【チェックボックス編】

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

※①【ラジオボタン編】と内容はほぼ一緒です。

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

1. 無反応ラベル系

この画面で「チェックボックス」のラベル部分をクリックした時にどうなると思いますか？切り替わりますか？「四角」をクリックしたわけではないのでそのままですか？

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

当たり前のことですが、ラベルの反応しないチェックボックスは非常に評判が悪いです。

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

<div class="form-check">
  <input class="form-check-input" type="checkbox" name="checkbox_silent" value="1">
  <label class="form-check-label">ラベル無反応</label>
</div>

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

labelで囲む

チェックボックスをlabelタグの内側に記入します。

<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="checkbox_around" value="1">
    ラベル囲み
  </label>
</div>

ラベルforで関連付け

labelにfor属性をつけて関連付けたいチェックボックスのidを指定します。

<div class="form-check">
  <input class="form-check-input" type="checkbox" name="checkbox_for" value="1" id="checkbox-label-for">
  <label class="form-check-label" for="checkbox-label-for">ラベル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ボタンでコーティングするケースは多いのではないでしょうか？
見た目がスタイリッシュになるし良いですよね。

では、下のチェックボックスは各々どれが選択されているかわかりますか？

正解は両方とも『Checkbox 1』と『Checkbox 3』です。

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

左

<div class="btn-group" role="group">
  <input type="checkbox" class="btn-check" id="btncheck1" name="checkbox_buttongroup" autocomplete="off" checked>
  <label class="btn btn-primary" for="btncheck1">Checkbox 1</label>
  <input type="checkbox" class="btn-check" id="btncheck2" name="checkbox_buttongroup" autocomplete="off">
  <label class="btn btn-primary" for="btncheck2">Checkbox 2</label>
  <input type="checkbox" class="btn-check" id="btncheck3" name="checkbox_buttongroup" autocomplete="off" checked>
  <label class="btn btn-primary" for="btncheck3">Checkbox 3</label>
</div>

右

<div class="btn-group" role="group">
  <input type="checkbox" class="btn-check" id="btncheckoutline1" name="checkbox_buttongroup_outline" autocomplete="off" checked="">
  <label class="btn btn-outline-primary" for="btncheckoutline1">Checkbox 1</label>
  <input type="checkbox" class="btn-check" id="btncheckoutline2" name="checkbox_buttongroup_outline" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheckoutline2">Checkbox 2</label>
  <input type="checkbox" class="btn-check" id="btncheckoutline3" name="checkbox_buttongroup_outline" autocomplete="off" checked="">
  <label class="btn btn-outline-primary" for="btncheckoutline3">Checkbox 3</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="btn-hybrid-check-1">
    <input type="checkbox" class="btn-hybrid-check" id="btn-hybrid-check-1" name="checkbox_button" autocomplete="off" checked="">
     Checkbox 1
  </label>
  <label class="btn btn-outline-primary" for="btn-hybrid-check-2">
    <input type="checkbox" class="btn-hybrid-check" id="btn-hybrid-check-2" name="checkbox_button" autocomplete="off">
    Checkbox 2
  </label>
  <label class="btn btn-outline-primary" for="btn-hybrid-check-3">
    <input type="checkbox" class="btn-hybrid-check" id="btn-hybrid-check-3" name="checkbox_button" autocomplete="off" checked="">
    Checkbox 3
  </label>
</div>

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

いっそのことボタンは枠のみにしてチェックボックスの『四角』を目立たせた方が良いかもしれませんね。
checkboxのクラスを空にしています。

<div class="btn-group" role="group">
  <label class="btn btn-outline-primary" for="btn-hybrid-check-1">
    <input type="checkbox" id="btn-hybrid-check-1" name="checkbox_button" autocomplete="off" checked="">
    Checkbox 1
  </label>
  <label class="btn btn-outline-primary" for="btn-hybrid-check-2">
    <input type="checkbox" id="btn-hybrid-check-2" name="checkbox_button" autocomplete="off">
    Checkbox 2
  </label>
  <label class="btn btn-outline-primary" for="btn-hybrid-check-3">
    <input type="checkbox" id="btn-hybrid-check-3" name="checkbox_button" autocomplete="off" checked="">
    Checkbox 3
  </label>
</div>

ボタンでコーティングした際もチェックボックスの『四角』は見えたほうが良いかもしれません。

まとめ

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

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