Components

ToggleGroup

An exclusive control with one shared moving active indicator

ToggleGroup

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

Import

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

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

Toggle

Use for single pressed-state controls and toolbar toggles

Tooltip

Use for short hints, hotkey labels, and low-priority helper text

Table of Contents

ToggleGroupImportExampleUseful PropsUsage Notes