Skip to content
github

Toggle Group

The ToggleGroup component groups a set of toggle buttons for switching between related states or options. It is composed of ToggleGroup.Root and ToggleGroup.Item, and supports single or multiple selection.

Variations

Types

The type prop defines the selection behavior: single (default) allows one active item, multiple allows several.

Controlled and uncontrolled

ToggleGroup.Root can be used as a controlled or uncontrolled component.

  • Controlled: pass both value and the onChange handler to fully control the selection from outside.
  • Uncontrolled with default value: pass value to set an initial selection; the component then manages its own state.
  • Fully uncontrolled: omit value and the component manages its state entirely on its own.

Variants

The variant prop controls the unselected appearance: outline, ghost, or transparent. The selectedVariant prop controls the style when an item is pressed, with options primary and secondary.

Sizes

The size prop controls the buttons’ overall dimensions. Supported values are md (default), sm, and xs.

Orientations

The orientation prop controls the direction the items are laid out. Supported values are horizontal (default) and vertical.

Unselectable

Pass unselectable to prevent users from deselecting the last remaining active item, keeping at least one option selected at all times.

Icon only

Pass iconOnly on an item to size it to fit a single icon. When set, the prefixIcon is the only icon displayed and the text prop becomes the item’s aria-label.

With tooltip

Pass tooltipProps on an item to wrap it in a Tooltip. It accepts the title, content, side, and align properties from TooltipProps.

Installation

import { ToggleGroup } from "@harnessio/ui/components";


<ToggleGroup.Root
  type="multiple"
  value={["2"]}
  orientation="vertical"
  variant="outline"
  selectedVariant="secondary"
  onChange={() => {}}
>
  <ToggleGroup.Item
    value="1"
    text="Option 1"
    tooltipProps={{
      title: "Title",
      content: <p>This is a tooltip</p>,
    }}
  />
  <ToggleGroup.Item value="2" text="Option 2" />
  <ToggleGroup.Item value="3" text="Option 3" />
</ToggleGroup.Root>;