ToggleGroup

• Adds a new ToggleGroup component which can be populated by ToggleGroup.Items and allow for one of the items to be active by handling the value of the ToggleGroup.
• The ToggleGroups value can be both controlled using state and uncontrolled.
• When using the ToggleGroup uncontrolled, it is recommended to set a default value using the property defaultValue.
• The ToggleGroup is using RovingTabindexRoot as a div, and the ToggleGroup.Item is using RovingTabindexItem as a designsysstem Button.

Roving Tabindex:

• Tab navigation in the ToggleGroup is handled by the new RovingTabindex utility component.
• The RovingTabindex feature allows for wrapping a bunch of the extensible component RovingTabindexItem in the extensible component RovingTabindexRoot. You can then tab in and out of the RovingTabindexRoot and only one of the items will be focused.
• You can also move focus left and right using the arrow keys.

Example usage:

import { ToggleGroup } from '@digdir/design-system-react';

<ToggleGroup defaultValue="value1">
  <ToggleGroup.Item value="value1">Option 1</ToggleGroup.Item>
  <ToggleGroup.Item value="value2">Option 2</ToggleGroup.Item>
  <ToggleGroup.Item value="value3">Option 3</ToggleGroup.Item>
</ToggleGroup>;

Resolves: #805