Summary
Create `` to implement the PatternFly v6 Toggle group component.
Group of mutually exclusive or multi-selectable toggle buttons.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
`` |
Exists |
| cockpit |
`` |
Exists |
| chickadee |
`` |
Exists |
Sub-components
- `` - Individual toggle button
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with `@patternfly/react-core` ToggleGroup
- MAY adjust element API to leverage web platform strengths
- SHOULD maintain CSS custom property theming compatibility
- SHOULD expose useful CSS shadow parts
Element-specific considerations
- React `isCompact` on group - reduced spacing; map to `compact` attribute
- React `areAllGroupsDisabled` - disables entire group; map to `disabled` attribute
- `ToggleGroupItem`: `text`, `icon`, `isSelected`, `onChange`, `isDisabled`, `buttonId`, `aria-label`
- Single-select vs multi-select: React defaults to multi-select (each item independently toggleable); consider a `single` attribute for exclusive-select mode
- RTI (Roving Tab Index) controller for keyboard navigation
- ARIA: `role="group"` on container with `aria-label`; items are ``
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create `` to implement the PatternFly v6 Toggle group component.
Group of mutually exclusive or multi-selectable toggle buttons.
Prior Art
Sub-components
Requirements
Element-specific considerations
Checklist
Implementation
Demos
Tests
Reviews
Ship