Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/ui-resolver.
• Live playground: /components/base-ui/toggle-group.

When to use it

Use ToggleGroup when several toggles belong to one coordinated choice model. It is a strong fit for segmented controls, view switchers, and compact formatting or filtering toolbars.

Choose type="single" for one active option and type="multiple" when several options can stay pressed together.

Slot strategy

• ToggleGroup owns the selection model, shared sizing, and spacing.
• ToggleGroupItem represents one selectable value inside the set.

Each item needs a stable value. Keep the set small and easy to scan so the group still reads like one control rather than a wall of independent buttons.

Behavior and theming guidance

Keep item content short and consistent. Icons work well for dense toolbars, but icon-only items still need clear aria-label text.

Use shared variant and size values across the whole group so the options feel coordinated. Reach for spacing only when the set needs a looser layout than the default segmented treatment.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/ui-resolver.
• Playground route: /sandbox?component=ToggleGroup.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes