iOS風の切り替えスイッチをradioボタンで実装。見た目はCSSだけで作り、キーボード操作とフォーム送信はブラウザ標準のまま使えます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
実体はただのradioボタンです。input自体は appearance: none と absolute 配置で見えなくし、隣接する span を「:checked + span」で選択中の見た目に切り替えます。radioなのでTabでグループに入り矢印キーで選択でき、name属性ごとフォーム送信にも使えます。フォーカスリングは input:focus-visible + span で span 側に描きます。
divとJSで自作するとキーボード操作・aria属性をすべて自前で書くことになります。radioで作れば無料でついてきます。
radioボタンを使ったセグメンテッドコントロール（iOS風の切り替えUI）を作ってください。inputはappearance: noneで隠し、:checked + spanで選択状態を表現、フォーカスリングも表示してください。JSは使わないでください。