Summary
Create a <pf-v6-form> web component implementing the PatternFly v6 Form component.
Form layout container providing consistent spacing, horizontal/vertical layout, and field-level organization.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
<pf-v6-form> |
Exists |
| cockpit |
<pf-v6-form> |
Exists |
| chickadee |
-- |
-- |
Sub-components
<pf-v6-form-group> - Groups a label, control, and helper text
<pf-v6-form-field-group> - Groups related form fields with header
Design
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with
@patternfly/react-core Form
- 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
isHorizontal: label/control side-by-side vs stacked
isWidthLimited / maxWidth: constrain form width
FormGroup: label, isRequired, fieldId, helperText, validated (success/warning/error/default)
FormSection: titled group of form groups; title slot or prop
FormFieldGroup: collapsible field group; FormFieldGroupHeader with title, description, actions
ActionGroup: button row at form bottom
FormHelperText with icon for validated states
- Native
<form> element inside shadow DOM vs light DOM passthrough - evaluate carefully
noValidate to disable browser built-in validation
FormLabel: for attribute must pierce shadow DOM - use FACE ElementInternals label association or light DOM labels
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create a
<pf-v6-form>web component implementing the PatternFly v6 Form component.Form layout container providing consistent spacing, horizontal/vertical layout, and field-level organization.
Prior Art
<pf-v6-form><pf-v6-form>Sub-components
<pf-v6-form-group>- Groups a label, control, and helper text<pf-v6-form-field-group>- Groups related form fields with headerDesign
Requirements
@patternfly/react-coreFormElement-specific considerations
isHorizontal: label/control side-by-side vs stackedisWidthLimited/maxWidth: constrain form widthFormGroup:label,isRequired,fieldId,helperText,validated(success/warning/error/default)FormSection: titled group of form groups;titleslot or propFormFieldGroup: collapsible field group;FormFieldGroupHeaderwith title, description, actionsActionGroup: button row at form bottomFormHelperTextwith icon for validated states<form>element inside shadow DOM vs light DOM passthrough - evaluate carefullynoValidateto disable browser built-in validationFormLabel:forattribute must pierce shadow DOM - use FACEElementInternalslabel association or light DOM labelsChecklist
Implementation
.claude/ADVICE.md@summaryand JSDoc on element classDemos
Tests
a11ySnapshotassertionsReviews
/review-apipasses/review-demospasses/review-a11ypasseseslintandstylelintpassShip
staging/pfv6(NOTmain)