SegmentedControl

単一選択のセグメント。ToggleGroup の配列を隠す。

2〜4 個の選択肢を横一列で切り替えます。中身は ToggleGroup ですが、 単一選択なので value は文字列 1 つです — Base UI の配列 API を扱う手間はここで吸収されています。

export const client = "only";

import { useState } from "react";
import { SegmentedControl } from "@squadbase/vantage/components";
import { CalendarDays, CalendarRange, Calendar } from "lucide-react";

const options = [
  { label: "日次", value: "day", icon: CalendarDays },
  { label: "週次", value: "week", icon: CalendarRange },
  { label: "月次", value: "month", icon: Calendar },
];

export default function Example() {
  const [grain, setGrain] = useState("week");
  return (
    <div className="flex w-[24rem] flex-col gap-4">
      <SegmentedControl
        options={options}
        value={grain}
        onChange={setGrain}
        ariaLabel="集計の粒度"
      />
      <SegmentedControl
        options={options}
        value={grain}
        onChange={setGrain}
        size="sm"
        fullWidth
        ariaLabel="集計の粒度（幅いっぱい）"
      />
    </div>
  );
}

import { SegmentedControl } from "@squadbase/vantage/components";
import type { SegmentOption } from "@squadbase/vantage/components";

PropType

options?SegmentOption[]

`{ label, value, icon?, disabled? }` の配列。

TypeSegmentOption[]

value?string

選択中の値（**文字列 1 つ**）。

Typestring

onChange?(value: string) => void

変更時。

Type(value: string) => void

size?"sm" | "default" | "lg"

アイコンの大きさ。

Type"sm" | "default" | "lg"

Default"default"

fullWidth?boolean

親の幅いっぱいに広げる。

Typeboolean

ariaLabel?string

グループ全体の説明。

Typestring

icon には lucide-react のコンポーネントをそのまま渡せます。

選択肢が 5 個を超えるなら Select、切り替える対象がページ相当なら Tabs の方が向いています。