ピル型 ON/OFF トグル（ラベル付き）
これは「公開／下書き／非公開」のように複数の選択肢をラベル付きで切り替える、ピル型のトグルです。中身はラジオボタン（ input type="radio" ）で、実際の input は opacity:0 で隠し、隣の span を見た目として使っています。
解説
これは「公開／下書き／非公開」のように複数の選択肢をラベル付きで切り替える、ピル型のトグルです。中身はラジオボタン（input type="radio"）で、実際の input は opacity:0 で隠し、隣の span を見た目として使っています。選択中の項目は input:checked+span のセレクタで白背景と影が付き、現在の状態がひと目で分かります。CSS のみで動作し、JavaScript は不要です。
向いている用途
- 記事やコンテンツの公開ステータスの切り替え
- 設定画面でのモードや表示範囲の選択
- 並び替えや表示形式など、排他的な選択肢の切り替え
選択肢は label ごと複製して増減でき、文言も自由に変えられます。アクティブ時の色は input:checked+span で調整します。中身がラジオボタンなので、キーボードの矢印キーで選択を移動でき、フォーム送信時にもそのまま値として送れるのが利点です。各 input に value を付け、グループを fieldset と legend で囲むと、何の設定かが補助技術にも伝わりやすくなります。
使用例・適したシーン
- 設定 UI
- 通知 ON/OFF
- ダークモード切替
よくある質問
選択肢の数は変えられますか？
はい。label のまとまりを複製または削除するだけで増減できます。中の span のテキストを書き換えれば「ON/OFF」など好きなラベルにできます。
フォーム送信に使えますか？
使えます。中身は同じ name のラジオボタンなので、各 input に value を設定すれば選択された値がそのままフォームで送信されます。JavaScript は不要です。