# ToggleGroup

> A segmented set of toggles (Radix toggle group) where one or several options are on at a time.

## Facts

- **Product**: Crew OS
- **Family**: Actions
- **Global**: `window.DigitalCrew.ToggleGroup`
- **Source**: `digitalcrew-orchestrator: components/ui/toggle-group.tsx`
- **Import in the app**: `import { ToggleGroup } from "@/components/ui/toggle-group";`
- **Live preview**: /design/components/toggle-group/preview.html
- **Page**: /design/components/toggle-group

## Guidelines

**Use it for** switching views (list, board, calendar) with `type="single"`, or filtering by several values at once (email, LinkedIn, phone) with `type="multiple"`.

**What you provide**: `type` (`single` or `multiple`, required), `value`/`onValueChange` or `defaultValue` (a string, or an array for `multiple`), `variant` and `size` from [`Toggle`](/design/components/toggle.md) (`default`/`outline`, `default`/`sm`/`lg`), set once on the group and shared with every `ToggleGroupItem` through context. Each item needs a `value`, and an `aria-label` when icon-only.

**Anatomy**: the group is `w-fit` and `rounded-md`; `outline` adds `shadow-xs`. Items reuse the toggle styles but are `flex-1` with square inner corners (only the first and last are rounded) and no shadow; outline items drop their left border except the first, so borders never double. Focused items rise above neighbours (`z-10`). Items share the group width equally, so give text items a width (`w-80`) or keep labels short.

**Don't** mix icon-only and text items in one group, or use more than five options (use a select).

## API

```ts
declare function ToggleGroup({ className, variant, size, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>): any;
declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): any;
export { ToggleGroup, ToggleGroupItem };
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function App() {
    return h("div", { className: "grid gap-5" },
      h(DC.ToggleGroup, { type: "single", variant: "outline", defaultValue: "board", className: "w-80", "aria-label": "Pipeline view" },
        h(DC.ToggleGroupItem, { value: "list", className: "px-3" }, h(I.ListChecks), "List"),
        h(DC.ToggleGroupItem, { value: "board", className: "px-3" }, h(I.KanbanSquare), "Board"),
        h(DC.ToggleGroupItem, { value: "calendar", className: "px-3" }, h(I.Calendar), "Calendar")),
      h(DC.ToggleGroup, { type: "multiple", defaultValue: ["email", "linkedin"], "aria-label": "Channels" },
        h(DC.ToggleGroupItem, { value: "email", "aria-label": "Email" }, h(I.Mail)),
        h(DC.ToggleGroupItem, { value: "linkedin", "aria-label": "LinkedIn" }, h(I.Linkedin)),
        h(DC.ToggleGroupItem, { value: "phone", "aria-label": "Phone" }, h(I.Phone)),
        h(DC.ToggleGroupItem, { value: "video", "aria-label": "Video" }, h(I.Video))));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Actions

- [Badge](/design/components/badge.md): A small pill label: count, channel, state or tag (Max's `components/ui/badge.tsx`).
- [Button](/design/components/button.md): The action control for both products: filled with `primary` by default, in six variants and six sizes (Max's `components/ui/button.tsx`).
- [GlassButton](/design/components/glass-button.md): The Crew OS button with a frosted-glass finish: the same variants, sizes and `asChild` as `Button`, plus a backdrop blur and a soft highlight layer.
- [Toggle](/design/components/toggle.md): A two-state button (Radix toggle) that stays pressed until clicked again.