[v3] Animated selection indicator for ToggleButtonGroup (reuse the Tabs.Indicator pattern)

[Saidheerajgollu]

Summary

Tabs already renders an animated pill that slides to the selected tab, using React Aria's new SelectionIndicator. ToggleButtonGroup — the segmented control, which is visually the same pattern — still hard-swaps a background colour on the selected button.

I'd like to propose an opt-in ToggleButtonGroup.Indicator that mirrors Tabs.Indicator, so both selection patterns in the library animate the same way. Following CONTRIBUTING I'm raising this before opening a PR, but I've built and verified it already so the proposal is concrete rather than hypothetical.

Why this is a small change

React Aria's ToggleButton already provides SelectionIndicatorContext:

// react-aria-components/dist/private/ToggleButton.mjs
React.createElement(SelectionIndicatorContext.Provider, {
  value: { isSelected: isSelected }
}, renderProps.children)

So an indicator placed inside a ToggleButton picks up selection state with no extra wiring — the same way Tabs.Indicator works today. RAC provides this context in GridList, ListBox, Menu, RadioGroup, Table, Tabs, TagGroup, ToggleButton and Tree; Tabs is currently the only place HeroUI takes advantage of it.

Proposed API

Identical in shape to Tabs.Indicator — placed inside each button:

<ToggleButtonGroup defaultSelectedKeys={["list"]} selectionMode="single">
  <ToggleButton id="list">
    List
    <ToggleButtonGroup.Indicator />
  </ToggleButton>
  <ToggleButton id="board">
    <ToggleButtonGroup.Separator />
    Board
    <ToggleButtonGroup.Indicator />
  </ToggleButton>
</ToggleButtonGroup>

Implementation

Branch: https://github.com/Saidheerajgollu/heroui/tree/feat/toggle-button-group-indicator (4 source files, +78 lines)

• indicator: "toggle-button-group__indicator" slot added to toggleButtonGroupVariants
• ToggleButtonGroupIndicator wrapping SelectionIndicator — the same 15-line shape as TabIndicator
• CSS reuses the existing --toggle-button-bg-selected token so the current visual identity is preserved, and copies the transition recipe from .tabs__indicator (translate, width, height, 250ms, var(--ease-out-fluid), with the motion-reduce override after the transition as the comment in tabs.css requires)
• A WithIndicator Storybook story

Backwards compatible. The indicator is opt-in, and the static selected background is only neutralised for buttons that actually contain one:

.toggle-button-group .toggle-button:has(> .toggle-button-group__indicator) {
  &[data-selected="true"] { background-color: transparent; }
}

Groups that don't use the indicator render byte-identically. :has() is already used across packages/styles/components.

Verified: pnpm build, pnpm lint, pnpm typecheck and prettier --check all pass. SSR render confirms only the selected button emits the indicator element, unselected buttons emit nothing.

Open questions for maintainers

1. Naming/placement — ToggleButtonGroup.Indicator mirrors Tabs.Indicator. Would you prefer it on the button (ToggleButton.Indicator) since that's where it's rendered?
2. Opt-in vs default — I kept it opt-in to avoid a visual change for existing users. You may prefer it to become the default look for segmented controls in a future minor, with the flat background as the fallback.
3. Scope — worth extending the same pattern to RadioGroup / ListBox (e.g. segmented radio cards), or keep this to ToggleButtonGroup for now?

Happy to open the PR, adjust the API, or drop it if this isn't a direction you want.

[Saidheerajgollu]

Opened #6743 with the implementation, rebased onto v3.2.3 since that is where recent packages/* changes are landing. The three open questions above (naming/placement, opt-in vs default, and whether to extend to RadioGroup/ListBox) are all still open — happy to reshape or close the PR if you would rather settle the API here first.