トグルスイッチ

Switch

別名: スイッチ、トグルボタン、Toggle

生態(さわってみる)

一言定義

つまみをスライドさせてオン/オフを即座に切り替える、2状態のコントロールUI。

分類

使う場面

  • 選択した瞬間に設定が即時反映される(送信ボタンを介さない)とき
  • オン/オフの二値であることが一目でわかるべき設定項目

避ける場面

  • フォーム送信を経て初めて確定する選択肢(→チェックボックス)
  • 3つ以上の選択肢から選ばせたいとき(→ラジオボタンやセレクトボックス)

近縁種との比較

チェックボックスとは見た目も机能も近いが、慣習的な使い分けは「変更が即座に反映されるか」に ある。トグルスイッチは選んだ瞬間に設定が有効になる(例: 通知のオン/オフ)のに対し、チェックボックス は「保存」や「送信」のような確定操作を経て初めて意味を持つ選択に使われることが多い。複数選択で かつ確定操作を伴うフォームでは、トグルスイッチではなくチェックボックスの並びを使うのが定石である。

実例リンク

アクセシビリティ

role
role="switch"(またはネイティブ input[type=checkbox][role=switch])、状態は aria-checked
キーボード操作
Tabで到達、Space(多くの実装ではEnterも)で切り替え
補足
M3/HIGは Switch、Carbon/Atlassianは Toggle と呼ぶ。「即時反映=Switch、送信して確定=Checkbox」という使い分けが定番論点(研究ノート同義語表)