Design Pattern

スイッチ

スイッチは、設定のオン / オフを即時に切り替えるためのパターンです。チェックボックスと見た目が似ていても、意味は異なります。状態が変わるとその場で反映される設定に限定して使うのが基本です。

難易度: 初級カテゴリ: フォーム

いつ使う / 使わない

使うべきとき

通知、公開設定、自動再生などのオン / オフを切り替える場合
変更結果が即時に反映される場合
二値の状態を直感的に伝えたい場合

使わないべきとき

送信前の同意確認 → チェックボックスを使う
複数候補から 1 つを選ぶ → ラジオボタンを使う
状態変更が保存ボタン待ちの場合 → スイッチよりチェックボックスの方が意味に合う

構造（Anatomy）

1 視認できるラベル

2 チェックボックスベースの入力

3 トラックとサム

4 現在状態を補足する文言

ラベル — 何の設定かを明示する。「オン / オフ」だけでは意味が不十分
入力 — ネイティブのチェックボックスをベースにし、必要に応じて role=switch を付ける
状態 — 色や位置だけでなく、文言でも現在状態を補うと分かりやすい

HTML 構造

重要なポイント

実装の土台は input type=checkbox にする
視覚上のスイッチ UI は CSS で重ねる
ラベル全体をクリック可能にし、タップ領域を確保する
状態変更が即時反映されることを文脈で伝える

CSS 実装

見た目で補助すべき点

未選択 — オフ状態だと一目で分かる色と位置にする
選択済み — トラック色とサム位置の両方で状態差を出す
フォーカス — キーボード操作時のリングを必ず付ける
無効 — 触れない状態はコントラストを保ちつつ操作不可に見せる

キーボード操作

Tab でスイッチに移動
Space でオン / オフを切り替える
変更時に周辺文言や画面状態も更新されると分かりやすい

ライブデモ

基本のスイッチ

単一設定のオン / オフを切り替える、最も基本的なスイッチです。

設定リスト

複数の即時反映設定を一覧で切り替える、設定画面向けのパターンです。

使いどころの比較

スイッチが適切な場面と、チェックボックスにすべき場面を比較しています。

よくある間違い

同意項目をスイッチで表現する

「オンにする設定」と「条件に同意する確認」は意味が違います。

ラベルがなく、近くの見出しに依存する

何を切り替えるのか分からないスイッチは操作できません。

色だけで状態を伝える

サムの位置や補足文言でも状態差を出す必要があります。