ToggleGroup

ToggleGroup combines mutually exclusive options into one control strip. Every item shares one moving active indicator.

Import

Example

import { ToggleGroup, ToggleGroupItem } from "@downcity/ui";

export function ViewModeToggle() {
  return (
    <ToggleGroup defaultValue={["list"]}>
      <ToggleGroupItem value="list">List</ToggleGroupItem>
      <ToggleGroupItem value="grid">Grid</ToggleGroupItem>
    </ToggleGroup>
  );
}

Useful Props

• orientation
• spacing
• variant
• size

Usage Notes

• Best for 2 to 5 short options
• ToggleGroup is exclusive; use separate Toggle controls for independent states
• Use Tabs instead when the control switches between content panels