# Toggle Group

- Page: <https://kznlabs.github.io/labsUI/components/toggle-group>

## Toggle Group (`toggle-group`, component)

Segmented control of toggle buttons. Single mode slides one pill to the pressed item (view mode, billing period); multiple mode toggles items independently (bold, italic). Arrow keys move between items.

- Install: `npx @kznlabs/labsui add toggle-group`
- Docs: <https://kznlabs.github.io/labsUI/components/toggle-group>
- Brings: list, use-controllable-state, use-indicator, utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<ToggleGroup>` (+ <div> props): Segmented control as a set of toggle buttons (aria-pressed). Arrow keys, Home and End
move between items. Single mode: one pill springs to the pressed item, always behind labels.
  - `defaultValue?: string | string[]`: Value, or values when `type="multiple"`, at first render (uncontrolled).
  - `onValueChange?: ((value: string) => void) | ((value: string[]) => void)`: Called with the pressed item's value, or every pressed value when `type="multiple"`.
  - `size?: "sm" | "default"`: Item height.
  - `type?: "single" | "multiple"`: "single": one choice at a time (view mode, billing period), a pill slides between items. "multiple": independent toggles (bold, italic, filters).
  - `value?: string | string[]`: Controlled value, or values when `type="multiple"`; pair with `onValueChange`.
- `<ToggleGroupItem>` (+ <button> props): One segment. Icon-only items need an aria-label.
  - `value: string`: Value reported when pressed.

### Usage

```tsx
<ToggleGroup aria-label="View" value={view} onValueChange={setView}><ToggleGroupItem value="grid">Grid</ToggleGroupItem><ToggleGroupItem value="list">List</ToggleGroupItem></ToggleGroup>
```

### Example: view-switch.tsx

```tsx
"use client";

import { LayoutGrid, List } from "lucide-react";
import { useState } from "react";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

export function ViewSwitch() {
  const [view, setView] = useState("grid");
  return (
    <ToggleGroup aria-label="View" value={view} onValueChange={setView}>
      <ToggleGroupItem value="grid" aria-label="Grid view"><LayoutGrid /></ToggleGroupItem>
      <ToggleGroupItem value="list" aria-label="List view"><List /></ToggleGroupItem>
    </ToggleGroup>
  );
}
```