ToggleGroup

Usage

import { Toggle, ToggleGroup, ToggleGroupItem } from '@acronis-platform/ui-react';

ToggleGroup is a set of pressable toggle buttons — single or multiple selection — built on Base UI's Toggle / ToggleGroup. Each ToggleGroupItem needs a value; control the pressed set with value / defaultValue. Toggle is the same button used standalone for an independent on/off control. Give icon-only toggles an aria-label.

Design-pending v1, ported from the legacy shadcn-uikit toggle-group.

Examples

<ToggleGroup defaultValue={['grid']} aria-label="View mode">
  <ToggleGroupItem value="grid" aria-label="Grid view"><LayoutGridIcon size={16} /></ToggleGroupItem>
  <ToggleGroupItem value="list" aria-label="List view"><ListIcon size={16} /></ToggleGroupItem>
</ToggleGroup>

A standalone toggle:

<Toggle aria-label="Favorite"><StarIcon size={16} /> Favorite</Toggle>

For choosing a form value use RadioGroup or InputSelect; for a single labelled on/off setting use Switch.

API Reference

ToggleGroup re-exports Base UI's ToggleGroup props (value / defaultValue / disabled / onValueChange). ToggleGroupItem and Toggle are Base UI Toggles (value, pressed / defaultPressed, disabled) plus className.