トグルスイッチ
トグルスイッチは、オンとオフを左右の動きで切り替える設定用のスイッチです。中身はチェックボックスを隠し、その横の span をレールに見立て、丸いつまみは ::after 疑似要素で描いています。チェックが入ると背景色が緑に変わり、つまみが transform:translateX() で右へ滑る仕組みです。
解説
トグルスイッチは、オンとオフを左右の動きで切り替える設定用のスイッチです。中身はチェックボックスを隠し、その横の span をレールに見立て、丸いつまみは ::after 疑似要素で描いています。チェックが入ると背景色が緑に変わり、つまみが transform:translateX() で右へ滑る仕組みです。transition を効かせているので、色の変化とつまみの移動がなめらかにつながります。
使う場面の例
- 通知のオンオフやダークモードなど、即時に切り替わる設定項目
- 機能の有効化を一目で示したい管理画面
- 同意の可否など、二択をはっきり見せたいフォーム
色は input:checked+span の background でオン状態の色を、span の background でオフ状態の色を指定できます。サイズはレールの幅と高さ、つまみの移動量を合わせて調整します。本体は隠したチェックボックスなので値の取得は容易ですが、見た目だけでは読み上げソフトに状態が伝わりにくいため、aria-label で何のスイッチかを補い、キーボードでも切り替えられるようにしておくと安心です。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
オンのときの色を変えたいです
オン状態は input:checked+span の background が担当しています。ここをブランド色に変えればオンの色が、span 単体の background を変えればオフの色が切り替わります。
スイッチの大きさは調整できますか
できます。レールである span の width と height、つまみの大きさ、そして checked 時の translateX の移動量を比率を保ったまま変えれば、小さくも大きくもできます。