ToggleGroup

Source: client/lib/theme/vueda-tailwind/controls/index.js

The row layout for a set of ToggleGroupItem.root children. The --gap custom property is driven by the consumer's spacing prop, which lets the same group render as a gapped row or (at spacing=0) as a segmented control where child items drop their outer radii and shared borders. The group/toggle-group Tailwind group label lets items react to group-level state.

Vue component: ToggleGroup

Slot	Default classes	Description
root	group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-vueda-control	The row layout for a set of ToggleGroupItem.root children. The --gap custom property is driven by the consumer's spacing prop, which lets the same group render as a gapped row or (at spacing=0) as a segmented control where child items drop their outer radii and shared borders. The group/toggle-group Tailwind group label lets items react to group-level state.

root

The row layout for a set of ToggleGroupItem.root children. The --gap custom property is driven by the consumer's spacing prop, which lets the same group render as a gapped row or (at spacing=0) as a segmented control where child items drop their outer radii and shared borders. The group/toggle-group Tailwind group label lets items react to group-level state.

Default classes:

group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-vueda-control

Source: client/lib/theme/vueda-tailwind/controls/ToggleGroup.theme.js:16