SegmentedControl

Single-choice segments — it hides ToggleGroup's array.

A row of two to four choices. It is built on ToggleGroup, but because it’s single choice value is one string — the array API is absorbed here.

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[]

An array of `{ label, value, icon?, disabled? }`.

TypeSegmentOption[]

value?string

The selected value — **a single string**.

Typestring

onChange?(value: string) => void

Fired on change.

Type(value: string) => void

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

Icon scale.

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

Default"default"

fullWidth?boolean

Stretch to the parent's width.

Typeboolean

ariaLabel?string

Describes the group.

Typestring

Pass a lucide-react component straight to icon.

Beyond five options, Select reads better; when the choices are whole views, Tabs fits.