トグルスイッチとは

つまみをスライドさせて ON・OFF を切り替える、通知設定などでよく使うスイッチ型の入力部品。

概要

つまみを左右にスライドさせて ON・OFF の 2 択を切り替える部品です。通知のオン・オフや、ダークモードの切り替えなど、即座に反映される設定でよく使われます。見た目は独自のスイッチですが、実装は <input type="checkbox"> をベースに CSS で見た目を作り、role="switch" を付けて「チェック欄」ではなく「スイッチ」として扱われるようにします。

別名

表記ゆれ：トグル、スイッチ、オンオフスイッチ、toggle switch

「トグル」は「切り替える」という意味の英語で、スイッチ以外のオン・オフ表示（開閉ボタンなど）にも使われる広い言葉です。

AI への伝え方

「通知のオン・オフをトグルスイッチで切り替えられるようにして」のように伝えます。ON・OFF が見た目ではっきり分かること（色や位置の変化）、キーボードでも操作できることを併せて頼むと、アクセシブルな実装になります。

似たパーツとの違い

「チェックボックス」は複数の項目から必要なものを選ぶ用途で、トグルスイッチは 1 つの設定を即座に ON・OFF する用途という違いがあります。見た目は似ていても、チェックボックスは「保存」ボタンを押して確定することが多いのに対し、トグルスイッチは切り替えた瞬間に反映されるのが一般的です。

デモ

通知を受け取るダークモード

コード

HTML

<div class="toggle-switch-demo">
  <label class="toggle-switch-demo__row" for="toggle-switch-demo-1">
    <span>通知を受け取る</span>
    <span class="toggle-switch-demo__switch">
      <input class="toggle-switch-demo__input" type="checkbox" role="switch" id="toggle-switch-demo-1" checked />
      <span class="toggle-switch-demo__track" aria-hidden="true"></span>
    </span>
  </label>
  <label class="toggle-switch-demo__row" for="toggle-switch-demo-2">
    <span>ダークモード</span>
    <span class="toggle-switch-demo__switch">
      <input class="toggle-switch-demo__input" type="checkbox" role="switch" id="toggle-switch-demo-2" />
      <span class="toggle-switch-demo__track" aria-hidden="true"></span>
    </span>
  </label>
</div>

CSS

.toggle-switch-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: sans-serif;
}

.toggle-switch-demo__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 260px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.toggle-switch-demo__switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch-demo__input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.toggle-switch-demo__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #b3b3b3;
  transition: background-color 0.15s ease;
}

.toggle-switch-demo__track::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

.toggle-switch-demo__input:checked + .toggle-switch-demo__track {
  background: #0017c1;
}

.toggle-switch-demo__input:checked + .toggle-switch-demo__track::before {
  transform: translateX(20px);
}

.toggle-switch-demo__input:focus-visible + .toggle-switch-demo__track {
  outline: 2px solid #0017c1;
  outline-offset: 2px;
}