Summary
Create `` to implement 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 `` 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
Element-specific considerations
- React `isChecked` (controlled) / `defaultChecked` (uncontrolled) - reflect as `checked` attribute
- React `isIndeterminate` - maps to `indeterminate` property (not an HTML attribute); `ElementInternals` does not natively handle this - set on inner `` and expose as JS property
- React `description` - use `slot="description"`; React `body` - use default slot
- React `isLabelWrapped` - label text wraps vs truncates
- React `isDisabled` - propagates from `fieldset[disabled]` via `ElementInternals`
- `id`, `name`, `value` for form submission
- ARIA: `aria-checked` must reflect indeterminate state as `"mixed"`
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create `` to implement the PatternFly v6 Checkbox component.
Form checkbox input with label, description, and body content support.
Prior Art
Design
Notes
Requirements
Element-specific considerations
Checklist
Implementation
Demos
Tests
Reviews
Ship