セグメンテッドコントロール

解説

「日・週・月」のように複数の選択肢から1つを選ぶ、iOS風のセグメンテッドコントロールです。注目したいのは、これがJavaScriptを一切使わずCSSだけで成り立っている点です。同じnameのラジオボタンを隠し、input:checked+labelのセレクタで選ばれたラベルにだけ白い背景と影を付けて、押されている状態を表現しています。ラジオボタンの仕組みを使うので、常にどれか1つだけが選ばれます。

向いている用途

• グラフやレポートの期間切り替え（日／週／月）
• 表示の並び替えや表示形式の選択タブ
• 2〜4個程度の排他的な切り替えスイッチ

選択肢を増やすには、ラジオとラベルの組をもう1セット同じ形で追加するだけです。transitionを付けているので切り替わりがなめらかに見えます。表示の見た目を切り替えるだけならこのままで十分ですが、選んだ値で実際にデータを出し分けたい場合は、各ラジオのchangeを拾うJSを別途足します。フォーム部品なのでキーボードの矢印キーでも移動でき、アクセシビリティ面でも素直な作りです。

使用例・適したシーン

• お問い合わせフォームの送信ボタン
• 資料ダウンロードの CTA
• ヒーローセクションの主要 CTA
• サブスク・申込ボタン