カード型 ON/OFF トグル
カード型 ON/OFF トグルは、設定項目を タイトル・説明つきのカード として並べ、右端のスイッチで切り替える UI です。土台は label で囲んだ checkbox で、本来のチェックボックスは画面外に隠し、 .tg-card__sw という擬似的なスイッチを CSS で描いています。
解説
カード型 ON/OFF トグルは、設定項目をタイトル・説明つきのカードとして並べ、右端のスイッチで切り替える UI です。土台は label で囲んだ checkbox で、本来のチェックボックスは画面外に隠し、.tg-card__sw という擬似的なスイッチを CSS で描いています。:checked 状態に応じてトラックの背景色とつまみの位置が transition で滑らかに移動するため、設定が「入っている／切れている」が一目で分かります。JavaScript は不要です。
向いている用途
- メール通知・プッシュ通知の ON/OFF
- 機能の有効・無効を切り替える設定画面
- プライバシーや表示オプションの管理
カード全体が label なので、スイッチだけでなくタイトルや説明文をタップしても切り替わり、押しやすさが上がります。ON のときの色は :checked 時のトラック背景を変えるだけでブランドに合わせられます。注意点として、状態を色だけに頼らず、つまみの位置でも区別できるこの設計はアクセシブルです。説明文を span に入れて何のための設定かを明記すると、迷わせない UI になります。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
スイッチの ON 時の色を変えたいです
checkbox が :checked のときに .tg-card__sw の背景色を指定しているルールがあります。その色コードをブランドカラーに書き換えれば、ON 状態のトラック色が変わります。つまみの色は別途指定できます。
カードのどこを押すと切り替わりますか？
カード全体が label になっているため、スイッチ部分だけでなくタイトルや説明文をタップしても ON/OFF が切り替わります。指で押せる範囲が広く、スマホでも操作しやすい設計です。