Summary
Create a <pf-v6-login-page> web component implementing the PatternFly v6 Login page component.
Full authentication page layout with branding, form fields, social login links, and footer.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
-- |
-- |
| cockpit |
-- |
-- |
| chickadee |
-- |
-- |
Notes
This is a composite component that combines background image, branding, form layout, and footer into a complete login experience.
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with
@patternfly/react-core LoginPage
- 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
- Sub-components:
LoginMainHeader (title, subtitle), LoginMainBody (form), LoginMainFooter (links), LoginFooter (page-level footer), LoginMainFooterBandItem, LoginMainFooterLinksItem
- Named slots:
header (logo/brand), main (form area), footer (page footer)
backgroundImageSrc prop or CSS custom property for bg image
- Social/alternative login: slot for icon links (GitHub, Google, etc.)
- Help link and sign-up link in footer band
- Language selector slot
LoginForm sub-component: username + password fields with show/hide toggle, remember me checkbox
- Form FACE consideration: contained
<form> or delegate to slotted form element
<main> landmark for login card; skip-to-content target
aria-label on the login form for screen readers
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create a
<pf-v6-login-page>web component implementing the PatternFly v6 Login page component.Full authentication page layout with branding, form fields, social login links, and footer.
Prior Art
Notes
This is a composite component that combines background image, branding, form layout, and footer into a complete login experience.
Requirements
@patternfly/react-coreLoginPageElement-specific considerations
LoginMainHeader(title, subtitle),LoginMainBody(form),LoginMainFooter(links),LoginFooter(page-level footer),LoginMainFooterBandItem,LoginMainFooterLinksItemheader(logo/brand),main(form area),footer(page footer)backgroundImageSrcprop or CSS custom property for bg imageLoginFormsub-component: username + password fields with show/hide toggle, remember me checkbox<form>or delegate to slotted form element<main>landmark for login card; skip-to-content targetaria-labelon the login form for screen readersChecklist
Implementation
.claude/ADVICE.md@summaryand JSDoc on element classDemos
Tests
a11ySnapshotassertionsReviews
/review-apipasses/review-demospasses/review-a11ypasseseslintandstylelintpassShip
staging/pfv6(NOTmain)