ToggleGroup

トグルの束。value は常に配列。

複数のトグルをひとつの帯にまとめます。Base UI では単一選択でも value は配列です — 単一選択が欲しいだけなら SegmentedControl がその面倒を引き受けます。

export const client = "only";

import { useState } from "react";
import { ToggleGroup, ToggleGroupItem } from "@squadbase/vantage/ui";
import { AlignLeft, AlignCenter, AlignRight } from "lucide-react";

export default function Example() {
  const [align, setAlign] = useState(["left"]);
  const [columns, setColumns] = useState(["revenue", "orders"]);
  return (
    <div className="flex flex-col gap-6">
      <ToggleGroup value={align} onValueChange={setAlign} variant="outline">
        <ToggleGroupItem value="left" aria-label="左寄せ">
          <AlignLeft />
        </ToggleGroupItem>
        <ToggleGroupItem value="center" aria-label="中央">
          <AlignCenter />
        </ToggleGroupItem>
        <ToggleGroupItem value="right" aria-label="右寄せ">
          <AlignRight />
        </ToggleGroupItem>
      </ToggleGroup>

      <ToggleGroup value={columns} onValueChange={setColumns} toggleMultiple spacing={0}>
        <ToggleGroupItem value="revenue">売上</ToggleGroupItem>
        <ToggleGroupItem value="orders">件数</ToggleGroupItem>
        <ToggleGroupItem value="aov">単価</ToggleGroupItem>
      </ToggleGroup>
    </div>
  );
}

import { ToggleGroup, ToggleGroupItem } from "@squadbase/vantage/ui";

PropType

value?string[]

選択中の値。**単一選択でも配列**。

Typestring[]

onValueChange?(value: string[]) => void

変更時。配列で返る。

Type(value: string[]) => void

toggleMultiple?boolean

複数選択を許す。

Typeboolean

variant?"default" | "outline"

Type"default" | "outline"

Default"default"

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

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

Default"default"

spacing?number

項目の間隔。`0` で連結された帯になる。

Typenumber

Default2

orientation?"horizontal" | "vertical"

Type"horizontal" | "vertical"

Default"horizontal"