ToggleGroup

A band of toggles. value is always an array.

Groups toggles into one band. Under Base UI value is an array even for single choice — if single choice is all you want, SegmentedControl already handles that for you.

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

The selected values — **an array even for single choice**.

Typestring[]

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

Fired on change, with an array.

Type(value: string[]) => void

toggleMultiple?boolean

Allow more than one selection.

Typeboolean

variant?"default" | "outline"

Type"default" | "outline"

Default"default"

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

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

Default"default"

spacing?number

Gap between items; `0` welds them into one band.

Typenumber

Default2

orientation?"horizontal" | "vertical"

Type"horizontal" | "vertical"

Default"horizontal"