iOS 風トグルスイッチ
標準のチェックボックスを見た目だけ置き換えた iOS 風スライドトグル です。実体は input type="checkbox" で、これを画面外に隠し（ opacity:0 ）、隣のトラックとつまみを CSS で描いています。
解説
標準のチェックボックスを見た目だけ置き換えたiOS 風スライドトグルです。実体は input type="checkbox" で、これを画面外に隠し（opacity:0）、隣のトラックとつまみを CSS で描いています。チェックされると input:checked+.sw__track で背景が緑に変わり、つまみが translateX で右へスライドします。cubic-bezier のイージングを使い、つまみがわずかに弾むような動きになっているのが iOS らしさのポイントです。
使う場面
- 設定画面の通知やダークモードの ON/OFF
- 機能の有効・無効を切り替えるスイッチ
- フォーム内の同意・購読のオプション
色は input:checked+.sw__track の背景色（このコードでは緑 #34c759）を変えるだけでブランドに合わせられ、サイズはトラックとつまみの width / height と移動量で調整します。中身がチェックボックスなのでフォーム送信やラベル連携もそのまま使え、:focus 時に外側へ光るリング（box-shadow）が出るためキーボード操作でも現在のフォーカスが分かります。アクセシビリティのため、何のスイッチか分かるラベルテキストを添えると親切です。
使用例・適したシーン
- 設定 UI
- 通知 ON/OFF
- ダークモード切替
よくある質問
ON のときの色を変えるには？
input:checked+.sw__track の background に指定した色（このコードでは緑 #34c759）を変更します。ブランドカラーに合わせたい場合はここを書き換えるだけで済みます。
フォーム送信でも値を扱えますか？
扱えます。見た目はCSSで変えていますが中身は通常の checkbox なので、name と value を付ければフォーム送信やラベルとの連携、JavaScript での checked 判定もそのまま使えます。