Summary
Create a <pf-v6-checkbox> web component implementing the PatternFly v6 Checkbox component.
Form checkbox input 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) with shadow label via
label attribute
- Use
ElementInternals for form association and ARIA
- Use ARIA IDL attributes for cross-root ARIA (Baseline 2025)
- Consider
referenceTarget for label association (Chrome-only, progressive enhancement)
- Slots for body and description content, as well as controlled checkboxes
- It should be considered a violation to use a sibling
<label> along with the label attribute
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with
@patternfly/react-core Checkbox
- 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
Summary
Create a
<pf-v6-checkbox>web component implementing the PatternFly v6 Checkbox component.Form checkbox input with label, description, and body content support.
Prior Art
Design
Notes
labelattributeElementInternalsfor form association and ARIAreferenceTargetfor label association (Chrome-only, progressive enhancement)<label>along with thelabelattributeRequirements
@patternfly/react-coreCheckbox