---
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

### Default with multiple selectable
```ts file="./ToggleGroupDefaultMultiple.tsx"
```

### Default with single selectable
```ts file="./ToggleGroupDefaultSingle.tsx"
```

### Icons
```ts file="./ToggleGroupIcon.tsx"
```

### Text and icons
```ts file="./ToggleGroupTextIcon.tsx"
```

### Compact variant
```ts file="./ToggleGroupCompact.tsx"
```