複数=□ チェック、単一=◯ ラジオ

形状で「複数選択可」「単一選択」が一目でわかる。標準を守ることが最大の親切。

複数選択なのに ◯ を使う

形状を入れ替えたり独自シェイプにすると、何個選べるのか直感的に判断できなくなる。

見出しと余白で明確に区切る

fieldset/legend や Label Control で囲い、別グループは余白で離す。

見出し無しで複数グループを並列に

どこまでが 1 グループか判別できず、誤選択や混乱の原因に。

能動的・肯定的に書く

チェック = 効く側に意味を寄せる。結果が明快になる。

否定形のラベルで二重否定が発生

「チェックする = 受け取らない」のような二重否定はユーザを混乱させる。

少数 (2〜7) は radio で並べる

全選択肢が同時に見え、クリック数も減る。8 個以上ならドロップダウンを検討。

3 個の選択肢を dropdown に隠す

クリックして開くまで選択肢が見えず、比較もしづらい。

最も安全 / 標準的な値を初期選択

ユーザの 80% が選ぶ値をデフォルトに。空状態が必要ならトグル等を検討。

何も選択されていない初期状態

「常に 1 つ選ばれている」という radio の規約を破ってしまう。

「その他」を最後に置く

「その他」選択時は自由入力欄を表示するとデータの質も上がる。

想定したケースだけで網羅性が低い

該当なしのユーザは適当な選択肢を選ぶしかなく、データが歪む。

<label> でラップ

テキスト部分をクリックしても切り替わる。.checkbox-label / .radio-label で本デザインシステムは自動対応。

input だけクリック可、ラベルは別要素

小さな box しかクリックターゲットがなく、フィッツの法則を無視。スマホで特に押しにくい。

<label> + accesskey

<label>
  <input type="checkbox" accesskey="m">
  <u>M</u>ail
</label>

キーボード操作と支援技術の両方に対応。Native input + <label> でほぼ自動。

input だけ、ラベル関連なし

<input type="checkbox">
<span>Mail</span>

スクリーンリーダーが選択肢名を読み上げず、Tab で辿る順序も保証されない。

選択 → 確定用ボタンでアクション

設定変更だけにとどめ、画面遷移や送信は ボタン で。ユーザの意志を待つ。

クリックで即フォーム送信

(選択した瞬間に切替・送信)

誤クリックがそのまま意図しないアクションに繋がり、取り消しが効かない。