Components

ToggleGroup

Use for grouped single-select or multi-select toggle controls

ToggleGroup

ToggleGroup groups multiple Toggle items into one control strip.

Import

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

Single-Select 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>
  );
}

Multi-Select Example

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

export function FilterToggleGroup() {
  return (
    <ToggleGroup multiple defaultValue={["task", "memory"]}>
      <ToggleGroupItem value="task">Task</ToggleGroupItem>
      <ToggleGroupItem value="memory">Memory</ToggleGroupItem>
      <ToggleGroupItem value="skill">Skill</ToggleGroupItem>
    </ToggleGroup>
  );
}

Useful Props

multiple
orientation
spacing
variant
size

Usage Notes

Best for 2 to 5 short options
Works for both single and multiple pressed 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

ToggleGroup Import Single-Select Example Multi-Select Example Useful Props Usage Notes