Segmented Control

同じオブジェクト群に対して「見せ方」だけを切り替える、排他的な選択 UI。統計画面の集計期間切り替えなど、現在のコンテクストを動かさずに表示を瞬時にスイッチする場面で使います。

プレビュー

実際にクリックして動作を確認できます。選択中の白枠が横にスライドします。

選択状態

各項目を選択したときの見え方。非選択項目同士の間にだけ区切り線が表示されます。

項目数のバリエーション

2〜5 個の範囲で使用するのが目安。テキストが短く、選んだ瞬間に表示が切り替わる場面に向いています。

2 項目

3 項目

4 項目

実装例

import { useState } from "react";
import { SegmentedControl } from "@/components/SegmentedControl";

function StatsPeriod() {
  const [period, setPeriod] = useState<"day" | "month" | "year">("day");
  return (
    <SegmentedControl
      value={period}
      onChange={setPeriod}
      ariaLabel="集計期間"
      options={[
        { value: "day", label: "日次" },
        { value: "month", label: "月次" },
        { value: "year", label: "年次" },
      ]}
    />
  );
}

仕様

トラック

height40px (標準コンポーネント高さ・M-size button と同じ)
container padding4px
background#E5E7EB (neutral/grey_20)
radius4px (radius_s)

各セグメント

height32px (= 40 - 4×2)
padding (左右)32px (spacing/m)
font (非選択)14px / Medium / #6B7280
font (選択中)14px / Medium / #1F2937 (色のみ変化)
hover bg (非選択)rgba(31, 41, 55, 0.08)
選択中の背景白 + shadow 0 1px 2px rgba(31,41,55,.16)
区切り線幅 1px × 高さ 18px / #9CA3AF / 非選択同士の間にのみ表示

アニメーション

選択中の白枠は transform / width を 0.2s ease でスライド
区切り線の表示/非表示は opacity 0.15s ease でフェード

利用基準

使うべき時

選択肢が 2〜5 個程度で、各項目のテキストが短い場面で使う
選んだ瞬間にその下のコンテンツが切り替わる UI に使う
カード内など、局所的な表示制御に使う
現在の作業文脈を動かさず、表示形式や切り口だけを切り替える

使わない時

選択肢が多数 (6+) ある → Select / Combobox を使う
ページ全体のコンテクストを切り替える → Tabs を使う
フォームで保存対象の値として保持する → Radio Button を使う
選択直後に変化が反映されない場面で使う

Figma

Segmented-Control コンポーネントを開く ↗