トグルスイッチ

Switch

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

○ 使う場面

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

× 避ける場面

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

別名

スイッチ、トグルボタン

近縁種との比較

「トグルスイッチ」は、2つの状態を交互に切り替える動作を指す英語toggleと、物理的な切り替えスイッチを意味するswitchを組み合わせた名称で、家庭の壁にある照明スイッチのような二値の切り替え動作を画面上のUIに見立てたものである。

近縁種違い・使い分け
チェックボックス選んだ瞬間に設定が有効になる(即時反映)ならトグルスイッチ、「保存」や「送信」のような確定操作を経て初めて意味を持つ選択ならチェックボックスを使う。複数選択かつ確定操作を伴うフォームでは、トグルスイッチではなくチェックボックスの並びを使うのが定石である。

分類

機能・役割
  • ナビゲーション
  • 入力・操作
  • 表示・整理
  • フィードバック・状態
表示レイヤー
  • インライン
  • 固定・追従
  • オーバーレイ
  • 全画面・遷移
複雑さ
  • 単体パーツ
  • 複合パーツ
  • セクション