ToggleGroup

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 (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).

Facts#

Group	Actions
Product	Crew OS
Global	window.DigitalCrew.ToggleGroup
Source	digitalcrew-orchestrator: components/ui/toggle-group.tsx
Import in the app	import { ToggleGroup } from "@/components/ui/toggle-group";

API#

TypeScript declarations emitted from components/ui/toggle-group.tsx (the module also exports ToggleGroup, ToggleGroupItem).

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#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<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#