ToggleGroup

A literal group of {@link Toggle}s: several two-state pressable buttons that share one selection, laid out joined (a seamless segmented row), separated, or wrapped. Built on Radix ToggleGroup — type="single" is radio-like (one at a time), type="multiple" is checkbox-like. Items inherit size / radius / variant from the group through context.

Usage

import { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps } from "@desk/ui/components/toggle-group";

Best practices

An always-one-selected mode switcher is SegmentedControl, not ToggleGroup — reach here for multi-select toolbars and deselectable choice chips.
layout="wrap" + required + type="single" is the wizard choice-chip recipe.
Icon-only ToggleGroupItems need an aria-label (a dev warning fires otherwise).

Props

ToggleGroup

Prop	Type	Default	Description
layout	`ToggleGroupLayout`	`"joined"`	How items sit together.
required	`boolean`	`false`	Single-type only: the active item cannot be deselected (Tabs/RadioGroup semantics). Dev-warns if used with `type="multiple"`.
size	`ResponsiveValue<ToggleSize>`	`"base"`	Toggle's scale — a single token or a per-breakpoint object.
radius	`ToggleRadius`	`"rounded"`	Toggle radius shared by every item.
variant	`ToggleGroupVariant`	`"default"`	Visual style forwarded to `toggleVariants`.

ToggleGroupItem

Prop	Type	Default	Description
icon	`LucideIcon \| ComponentType<SVGProps<SVGSVGElement>>`		Leading (or trailing) icon; icon-only items must supply `aria-label`.
iconPlacement	`"end" \| "start"`	`"start"`	Icon position relative to the label.
radius	`ToggleRadius`		Fallback radius when the group context omits one.
size	`ToggleSize`		Fallback size when the group context omits one.
variant	`ToggleGroupVariant`		Fallback variant when the group context omits one.

Also exports

interfaceToggleGroupItemProps

Composition

Builds on

Icon, SegmentedControl, Toggle