Components

Toggle Group

Toggle groups allow users to select one or more options from a set. They are useful for settings, filters, and other scenarios where multiple choices are available.

Usage

Use a toggle group to let users make selections within an interface, either single mutually exclusive options or multiple independent options.

Interaction states

Default

The default state, prior to user interaction.

Pressed

The button in the toggle group is currently activated.

Use short, clear, and concise labels in a logical order.

Avoid long or unclear labels.

Formatting

Anatomy

A toggle group consists of a set of toggleable buttons.

A. Container
B. Label
C. Selected button
D. Unselected button

Modify

Variants

A toggle group can be configured to allow only a single option, typically for selections between mutually exclusive options or for toggling between states. Alternatively, it can be configured to allow multiple options simultaneously, for example in filtering where each option can be toggled independently. The two variants have slightly different designs to indicate their function.

Single select

Single select – only one option is allowed to be active at a time.

Multi select

Multi select – multiple options are allowed to be active simultaneously.

Sizes

A toggle group is available in medium and small sizes. Medium is the default size and should be used in most situations, while the small variant can be used when vertical screen space is limited.

Medium and small toggle groups.

Icons

Icons can be added to toggle buttons to further guide the user. When using the icon-only option, be sure to use well-known standard symbols to avoid potential ambiguity.

Toggle groups with text only, text + icon, icon only configuration.