Disabled Toggle Group for React

Yes. Disabling the group disables every ToggleGroupItem in it, and an item can't be re-enabled while the group is disabled. To turn off only one action, leave the group enabled and disable that item instead. The prop is disabled, on the group or on an item.

Explain it, but in visible text rather than a tooltip. Disabled items ignore the pointer and can't be focused, so a tooltip on them never opens. A short line next to the toolbar, such as "Formatting is off in view mode", reaches everyone.

Yes. Each item fades with disabled:opacity-50 and ignores the pointer, so add your own disabled: classes to the items, such as disabled:opacity-30. Keep the disabled look clearly different from the enabled one.

Pass a boolean expression instead of a fixed value, such as whether the document is read-only or still loading. The items enable or disable as soon as the value changes, and their pressed state is kept.

Yes. Give the group a starting value as well as disabling it, and the pressed items show their pressed background, faded, without being changeable. That suits a read-only document whose formatting should still be visible in the toolbar. For example defaultValue with ["bold", "italic"].

Yes. Each item is a native button with the disabled attribute, so screen readers announce it as dimmed or unavailable along with its aria-label, and pressing it does nothing. Since keyboard users can't reach the items, put any explanation in text outside the group.