ToggleGroup.md

id	Toggle group
section	components
cssPrefix	pf-v5-c-toggle-group
propComponents	ToggleGroup ToggleGroupItem

import './toggleGroup.css';

import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core'; import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon'; import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';

Examples

Single select toggle group

A single select toggle group allows users to toggle between multiple items.

To indicate whether a <ToggleGroupItem> is selected or not, use the isSelected property.

Multi select toggle group

A multi select toggle group allows users to select multiple items at once.

When a toggle item is disabled it cannot be selected. Click the "Disable all" button in the following example to see this in action.

With icons

You can use a recognizable icon as a toggle item label.

To do this, pass an imported icon to the icon property of a <ToggleGroupItem>.

With text and icons

Adding text to a toggle item with an icon helps clarify the button's function.

To do this, pass a descriptive label to the text property of a <ToggleGroupItem>.

Compact toggle group

When space in a UI is limited, you can use a compact toggle group.

To apply compact styling to a <ToggleGroup>, use isCompact.