Toggle group

A toggle group is a set of controls that can be used to quickly switch between actions or states.

Examples

Default

With icon

Icon-and-text

Compact

Full width toggle

To make toggle group items fill the available space, use .pf-m-fill. In the following example, the toggle group items fill the width of the parent as the window size changes.

Documentation

Accessibility

Attribute	Applied to	Outcome
`aria-label="[button label text]"`	`.pf-v6-c-toggle-group__button`	Provides an accessible name for the button when an icon is used instead of text. Required when icon is used with no supporting text
`disabled`	`.pf-v6-c-toggle-group__button`	When a button element is used, indicates that it is unavailable and removes it from keyboard focus. Required when button is disabled

Usage

Class	Applied to	Outcome
`.pf-v6-c-toggle-group`	`<div>`	Initiates the toggle group. Required
`.pf-v6-c-toggle-group__button`	`<button>`	Initiates the toggle group button. Required
`.pf-v6-c-toggle-group__item`	`<div>`	Initiates the toggle group item wrapper. Required
`.pf-v6-c-toggle-group__text`	`<span>`	Initiates the toggle button text element.
`.pf-v6-c-toggle-group__icon`	`<span>`	Initiates the toggle button icon element.
`.pf-m-compact`	`.pf-v6-c-toggle-group`	Modifies the toggle group for compact styles.
`.pf-m-fill`	`.pf-v6-c-toggle-group`	Modifies the group items to fill the available space.
`.pf-m-selected`	`.pf-v6-c-toggle-group__button`	Modifies the toggle button group button for the selected state.

Edit this page on GitHub