# Toggle Group

> Grouped toggles: single or multiple selection.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/toggle-group.json`

## Install

```tsx
import { ToggleGroup, ToggleGroupItem } from "@aspyn-io/kit";
```

### Single choice (view switcher)

```tsx
<ToggleGroup type="single" defaultValue="total" variant="outline">
  <ToggleGroupItem value="total">Total</ToggleGroupItem>
  <ToggleGroupItem value="by-status">By Status</ToggleGroupItem>
</ToggleGroup>
```

### Multiple (filters)

```tsx
<ToggleGroup type="multiple" defaultValue={["breaks"]}>
  <ToggleGroupItem value="cancelled">Cancelled</ToggleGroupItem>
  <ToggleGroupItem value="breaks">Breaks</ToggleGroupItem>
  <ToggleGroupItem value="completed">Completed</ToggleGroupItem>
</ToggleGroup>
```

## Notes

- type="single" behaves like radio; type="multiple" like checkboxes.