💠 Toggle Group

A set of two-state buttons that can be toggled on or off.

Usage

The Toggle Group component consists of a set of toggle buttons that allow users to make multiple selections or toggle between different states.

It's used to present users with a small set of options where multiple choices are permissible and state changes are clear and immediate.

Multiple option selection: Use Toggle Groups when users can select more than one option and need to see their choices reflected instantly.
Setting preferences: Employ Toggle Groups for settings that involve on/off switches, such as feature toggles.
Filtering content: Utilize Toggle Groups in interfaces where users filter content based on a small set of attributes, like showing or hiding elements on a page.
Mode switching: Toggle Groups are ideal for changing modes within an application, such as switching between different view types or themes.

Do not use Toggle Groups for actions that require submission or have significant consequences without confirmation.

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Using roving tabindex (opens in a new tab) to manage focus movement among items.

Key	Description
`Tab`	Moves focus to either the pressed item or the first item in the group.
`Space`	Activates/deactivates the item.
`Enter`	Activates/deactivates the item.
`ArrowDown`	Moves focus to the next item in the group.
`ArrowRight`	Moves focus to the next item in the group.
`ArrowUp`	Moves focus to the previous item in the group.
`ArrowLeft`	Moves focus to the previous item in the group.
`Home`	Moves focus to the first item.
`End`	Moves focus to the last item.