ピル切替トグル（タブ風 2 択）
ピル切替トグルは、丸みのある帯の中で「月額／年額」のような 2 択を切り替える UI です。仕組みは隠した radio ボタンと、その後ろをスライドする .pl-tg__sl という背景チップで作られています。
解説
ピル切替トグルは、丸みのある帯の中で「月額／年額」のような 2 択を切り替える UI です。仕組みは隠した radio ボタンと、その後ろをスライドする .pl-tg__sl という背景チップで作られています。選択中のラベルの色が反転し、背景チップが transition で滑らかに移動することで、今どちらを選んでいるかが直感的に伝わります。
使う場面
- 料金プランの月額・年額の切り替え
- 表示単位やタブ的な 2 択の絞り込み
- 設定画面でのモード切替（標準／詳細など）
ラジオボタンを使っているため、JavaScript なしで選択状態を保持できます。チップの色は .pl-tg__sl の background、帯の色は .pl-tg の background で変更します。チップは固定幅で動かしているので、ラベルの文字数を大きく変える場合は width と移動量の transform を合わせて調整してください。input を display:none で隠していますが、label の for が対応しているのでクリックは効きます。キーボード操作も考えるなら、視覚的に隠しつつフォーカス可能な方法に変えるとより親切です。
使用例・適したシーン
- 設定 UI
- 通知 ON/OFF
- ダークモード切替
よくある質問
選択状態の保持に JavaScript は使いますか
使いません。隠したラジオボタンのchecked状態で選択を保持し、CSSのセレクタで色とスライドを切り替えています。フォーム送信時にも選択値をそのまま使えます。
ラベルを 3 択以上にできますか
できますが、スライドする背景チップは固定幅で位置を計算しているため、選択肢ごとにwidthと移動量のtransformを追加で指定し直す必要があります。