Repository navigation
[feat]: Create <pf-v6-form> element #1663
Copy link
Copy link
Open
Labels
1:1Aligning components with PatternFly v4Aligning components with PatternFly v4design systemUpdates or issues to align components to the Red Hat Design System.Updates or issues to align components to the Red Hat Design System.for devnew component requestpriority: lowSeverity level: 3Severity level: 3priority: mediumSeverity level: 2Severity level: 2
Milestone
Description
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-coreForm - 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 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- Native
<form>element inside shadow DOM vs light DOM passthrough - evaluate carefully noValidateto disable browser built-in validationFormLabel:forattribute must pierce shadow DOM - use FACEElementInternalslabel association or light DOM labels
Checklist
Implementation
- API per
.claude/ADVICE.md - CSS uses v6 tokens, logical properties, nesting
-
@summaryand JSDoc on element class
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)
-
a11ySnapshotassertions
Reviews
-
/review-apipasses -
/review-demospasses -
/review-a11ypasses -
eslintandstylelintpass
Ship
- Add changeset
- PR targets
staging/pfv6(NOTmain)
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
1:1Aligning components with PatternFly v4Aligning components with PatternFly v4design systemUpdates or issues to align components to the Red Hat Design System.Updates or issues to align components to the Red Hat Design System.for devnew component requestpriority: lowSeverity level: 3Severity level: 3priority: mediumSeverity level: 2Severity level: 2
Activity
[-][NEW] Form component[/-][+][feat]: Create `<pf-v6-form>` element[/+]