Repository navigation
[feat]: Create <pf-v6-radio> element #2566
Description
Summary
Create `` to implement the PatternFly v6 Radio component.
Form radio button with label, description, and body content support.
Prior Art
| Source | Element | Status |
|---|---|---|
| PFE v4 | -- | -- |
| cem | -- | -- |
| cockpit | -- | -- |
| chickadee | -- | -- |
Design
Notes
- Implement as a Form-Associated Custom Element (FACE) using `ElementInternals`
- Use ARIA IDL attributes for cross-root ARIA (Baseline 2025)
- Consider `referenceTarget` for label association (Chrome-only, progressive enhancement)
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with `@patternfly/react-core` Radio
- MUST participate in native form submission via FACE
- 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
- `id`, `name`, `value` attributes are required for proper radio group behavior and form submission
- React `isChecked` (controlled) / `defaultChecked` (uncontrolled) - reflect as `checked` attribute
- React `description` - secondary text below label; use `slot="description"`
- React `body` - additional content below description; use default slot or `slot="body"`
- React `isLabelWrapped` - label text wraps vs truncates
- React `isDisabled` - disable via `ElementInternals`; propagates from `fieldset[disabled]`
- Radio grouping: browsers handle mutual exclusion via shared `name`; FACE must also implement this
- ARIA: inner `` or `role="radio"` with `aria-checked`; label via `aria-labelledby`
Checklist
Implementation
- API per `.claude/ADVICE.md`
- CSS uses v6 tokens, logical properties, nesting
- `@summary` and JSDoc on element class
- `formAssociated = true` and `ElementInternals` for form participation
- Radio group mutual exclusion tested
Demos
- Demos match patternfly.org naming/structure
- CSS custom properties match computed styles from patternfly.org (Chrome MCP)
- Visual parity verified via Chrome MCP
Tests
- Public API covered (attributes, properties, events, slots)
- `a11ySnapshot` assertions
- Form submission test
Reviews
- `/review-api` passes
- `/review-demos` passes
- `/review-a11y` passes
- `eslint` and `stylelint` pass
Ship
- Add changeset
- PR targets `staging/pfv6` (NOT `main`)
Activity
ArathyKumar commentedon Aug 20, 2025
Following the discussion during the RHDS office hours held on 18th August 2025, the team has collectively agreed to proceed with Approach 2 for the implementation of the pf-radio component, as outlined in the document.
This option was selected because it effectively addresses both cross-root ARIA concerns and accessibility issues. By placing the input and label elements in the light DOM and slotting them into the shadow DOM, this approach ensures better alignment with accessibility standards and enables more predictable behavior.
cc: @bennypowers @markcaron @zeroedin @adamjohnson
[-][1:1]: pf-radio[/-][+][feat]: Create `<pf-v6-radio>` element[/+]