Outline Toggle Group for React

Both variants are transparent while unpressed and fill with the muted background when pressed. The default variant has no border, so the items only appear on hover or when pressed; the outline variant adds a border in the input border color, so each item reads as a button from the start.

The variant doesn't change how the group is announced or used from the keyboard. For contrast, the input border color is meant to be visible against the background in both light and dark themes; if you change it, keep at least 3:1 against the surface, and check the pressed fill as well, since it's what tells pressed and unpressed apart.

Yes. Add a border class to each ToggleGroupItem, such as border-primary, or style the pressed item only. The pressed item has data-pressed, so use data-pressed:border-primary.

Use the outline variant when the group sits on a busy or tinted surface, when the buttons need to be visible before anyone hovers them, or when nearby buttons are outline too. Use the default variant inside a toolbar that already has its own frame, where a border on every item adds noise.

Yes. The variant only changes the look, and the selection mode only changes the behavior. This example allows multiple selection; the Single Selection Toggle Group example uses the outline variant with one pressed item at a time.

Yes. The border helps people see the targets on small screens and in bright light. The default size is still smaller than the 44 pixel touch target in most styles, so on touch-first screens use size="lg" or keep the default spacing between items so a tap can't land on the wrong one.