What's the advantage of using ToolbarPrimitive.ToggleGroup over ToggleGroup?

[funwithtriangles]

I'd like to use the same styled ToggleGroup in both my toolbar and some other parts of my app. What's the best approach here? Should I just use the base ToggleGroup inside of my toolbar? I'm curious to know why ToolbarPrimitive also exports a very similar component.

[jjenzz]

each radix component exports its own parts because the component might attach additional functionality or accessibility for that specific use-case. just because they look the same doesn't necessarily mean the a11y/functionality is the same unfortunately.

With Toolbar.ToggleGroup:

CleanShot.2022-03-28.at.16.53.54.mp4

With ToggleGroup:

CleanShot.2022-03-28.at.16.56.47.mp4

[funwithtriangles]

I've had one more thought on this topic and would be curious to hear your thoughts. What's the best approach if I actually wanted to use RadioGroup inside of my toolbar? Toolbar doesn't export Toolbar.RadioGroup

[benoitgrelard]

RadioGroup would usually be used in forms, hence why we went with ToggleGroup as a more generalised component within a toolbar. You can achieve the same result and you don't need to submit a value in a toolbar.

[funwithtriangles]

Okie doke! So I just need to make sure I'm controlling ToggleGroup so it acts in a radio fashion. Thanks!

[benoitgrelard]

type="single" gets you there, but I guess you mean ensuring you can't "unselect" a value?
Like in this example: https://www.radix-ui.com/docs/primitives/components/toggle-group#ensuring-there-is-always-a-value

[funwithtriangles]

yep makes sense, thanks!