セグメンテッドコントロール
Segmented control
別名: セグメントボタン、セグメントコントロール、トグルボタングループ、コンテンツスイッチャー、Segmented buttons、Toggle button group、Content switcher
生態（さわってみる）
選択中: リスト表示
一言定義
排他的な選択肢を横並びのボタン群として常時提示し、押した項目に応じて設定値や表示モードを即座に切り替えるUI。
分類
使う場面
- 2〜5個程度の排他的な表示モード・設定値を、常に選択肢を見せたまま切り替えたいとき
- コンテンツ量が少なく、画面遷移やパネル切り替えを伴わない設定値の選択
避ける場面
- 選択肢が多く1行に収まらないとき（→セレクトボックス）
- 選んだ結果が別コンテンツパネルの表示切り替えであるとき（→タブ）
近縁種との比較
排他的な選択肢を横並びのボタン列として常時提示するこのUIは、デザインシステムによって呼び名が大き く割れている代表例で、Apple HIGは「Segmented control」、Material Design 3は「Segmented buttons」、MUIは「Toggle button group」、IBM Carbonは「Content switcher」と、同一の部品に対して4 通りの名称を与えている。本図鑑ではNN/gや国内の実務記事で定着している**セグメンテッドコントロール **を見出し名として採用し、他の呼称はすべてaliasesに収録した。タブとは見た目が近いが、タブがコ ンテンツパネルの切り替え（ナビゲーション）であるのに対し、セグメンテッドコントロールは単一の設定 値・状態を選ばせる入力に近い役割を持つ点で異なる。ラジオボタンとは選択の排他性という点で同じ 性質を持つが、ラジオボタンが縦並びや個別の丸印で並ぶフォーム部品であるのに対し、セグメンテッドコ ントロールは連結されたボタン列の見た目を取る点が違いである。
実例リンク
アクセシビリティ
- role
- role="radiogroup" とその子に role="radio" + aria-checked（コンテンツパネルの切り替えではなく単一の設定値・状態を選ぶ入力であるため、tablistパターンではなくradiogroupパターンを採用）
- キーボード操作
- ←→（縦並びなら↑↓）で選択移動、移動と同時に即決定。roving tabindexで選択中の1項目のみtabindex=0にする
- 補足
- HIG/M3/MUI/Carbonで実装パターンが微妙に異なるため、自作する場合はどのAPGパターンに準拠したかをコメントで明記しておくと保守しやすい