feat(text-input)!: port to `<pf-v6-text-input>` by zeroedin · Pull Request #3160 · patternfly/patternfly-elements

zeroedin · 2026-08-12T16:40:58Z

What I did

Removes <pf-v5-text-input>
Ports <pf-v5-text-input> to <pf-v6-text-input> web component for PatternFly v6
Single-line text input with type variants, validation states, and custom icon support
Form-associated custom element (FACE): submits value via ElementInternals, supports form reset, constraint validation (checkValidity(), reportValidity(), setCustomValidity())
Progressive enhancement for referenceTarget: when available, external <label for> and aria-describedby resolve natively through the shadow boundary
Fallback label association via delegatesFocus + computedLabelText string copy (same mechanism as v5)
Error state announced to screen readers via visually-hidden role="alert" + aria-describedby on the internal input
CSS uses v6 design tokens (--pf-v6-c-form-control--*, --pf-t--global--*) with light-dark() fallbacks
Grid layout with ::before/::after pseudo-elements for border styling (matching v6 SCSS structure)
Internal class-based state styling via classMap instead of :host([attr]) selectors
Cancelable change event: call preventDefault() to reject a value change
Labels via external <label for="id"> or accessible-label attribute
Keyboard: Enter submits the parent form (when valid)
Demos: basic, disabled, start-truncated, read-only, invalid, custom-icon, custom-icon-and-invalid, select-text, form-submission, validation

InternalsController fix (pfe-core)

Exposes form, validationMessage, and willValidate getters on InternalsController
These were declare-only (TypeScript type annotations with no runtime implementation) since the dynamic proxy was removed in feat: listbox elements #2570
Required by pf-v6-text-input for Enter-to-submit (form?.requestSubmit()) and error message rendering (validationMessage)
No impact on existing elements — none access these properties on the controller today

Closes #3043

Intentional divergences from React

customIcon prop replaced by icon slot (slotted content for composability)
isDisabled/isRequired renamed to disabled/required (no is- prefix per web component convention)
isStartTruncated replaced by truncated="start" enum attribute for future extensibility
readOnlyVariant split into readonly + plain attributes (native HTML readonly + visual modifier)
isExpanded/expandedProps not implemented (combobox patterns will be handled by a dedicated composite element)
onChange callback replaced by cancelable change DOM event
validated="default" state represented by attribute absence
innerRef + .select() replaced by select() method directly on the element
Form association added (not in React): native form participation, submission, reset, and constraint validation

Testing Instructions

Notes to Reviewers

changeset-bot · 2026-08-12T16:41:05Z

🦋 Changeset detected

Latest commit: 99ff953

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@patternfly/pfe-tools	Patch
@patternfly/pfe-core	Patch
@patternfly/elements	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify · 2026-08-12T16:41:48Z

✅ Deploy Preview for patternfly-elements ready!

Name	Link
🔨 Latest commit	`92afe77`
😎 Deploy Preview	https://deploy-preview-3160--patternfly-elements.netlify.app/

To edit notification comments on pull requests, go to your Netlify site settings.

github-actions · 2026-08-12T16:42:27Z

✅ Commitlint tests passed!

More Info

{
  "valid": true,
  "errors": [],
  "warnings": [],
  "input": "feat(text-input)!: port  to `<pf-v6-text-input>`"
}

github-actions · 2026-08-12T16:44:47Z

SSR Test Run for 453eca2: Report

…rnalsController

…ionMessage

github-actions · 2026-08-12T17:59:35Z

SSR Test Run for 86592b8: Report

github-actions · 2026-08-12T18:24:36Z

SSR Test Run for 5eba62d: Report

github-actions · 2026-08-18T14:51:10Z

SSR Test Run for ae30497: Report

github-actions · 2026-08-20T13:39:35Z

SSR Test Run for 92afe77: Report

adamjohnson

Would recommend running a Claude code review on this PR since Qodo is not enabled (?) for this repo.
- I see some things flagged around validity, preventDefault() on change, and formResetCallback always clearing to ''.
The addition of reference target is a nice look forward, but, currently, has zero browser support and is still in development. I could see arguments to not include this functionality with this PR, even though we want it bad. It may be better suited for a follow up.

adamjohnson · 2026-08-20T20:05:26Z

+---
+<form id="text-input-form">
+  <label for="input">Name</label>
+  <pf-v6-text-input id="input" name="username" required></pf-v6-text-input>


The required attribute here does not block form submit. FACE validity stays valid until something calls checkValidity().

adamjohnson · 2026-08-20T20:14:47Z

+
+  #renderStatusIcon(): TemplateResult<1> | string {
+    if (this.#isInvalid && this.validated !== 'error') {
+      return html`<svg role="presentation" fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512"><path d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"/></svg>`;


I'd prefer to see aria-hidden="true" here in place of role="presentation" just to make sure these SVGs are really hidden from AT. Here's more info on this hidden vs presentation stance.

Be sure to do it here and elsewhere in this PR (demos).

adamjohnson · 2026-08-20T20:34:29Z

+<fieldset>
+  <legend>Invalid</legend>
+  <pf-v6-text-input id="invalid-input"
+                    validated="error"


Our buddy Claude is saying this state is "visual only" and constraint validation never ran, so there's nothing to announce ala #status-message. Double check on that.

I would also consider renaming the <legend> to something like "Snowboards" so that, when using AT, we don't get confused when it might announce "invalid, text input, invalid" or something similar.

Also, do you think validated="error" is a necessary attribute? aria-invalid maps directly to the HTML required attribute. Is this being added so that users could intercept manually and display this state?

adamjohnson · 2026-08-20T20:37:44Z

+        </span>
+        <span id="status-message"
+              role="${ifDefined(this.#isInvalid ? 'alert' : undefined)}"
+              aria-live="${ifDefined(this.#isInvalid ? 'assertive' : undefined)}"


Since the line above sets role="alert", you do not need the aria-live="assertive" here. Source.

feat(text-input): add <pf-v6-text-input>

7fb7155

zeroedin changed the base branch from main to staging/pfv6 August 12, 2026 16:41

github-actions Bot added the AT passed Automated testing has passed label Aug 12, 2026

zeroedin added 4 commits August 12, 2026 13:53

fix(core): expose form, validationMessage, willValidate on Inte…

5c1ca40

…rnalsController

fix(text-input): use InternalsController getters for form and validat…

6bf0009

…ionMessage

test(text-input): add tests

9c38844

chore: add changesets

f1eb403

docs(text-input): add docs page

af1aabd

docs(text-input): improve comments

71ba5c0

zeroedin marked this pull request as ready for review August 18, 2026 14:47

zeroedin requested review from ArathyKumar and adamjohnson August 18, 2026 14:47

zeroedin added 2 commits August 20, 2026 09:31

fix(tools): add typings for invalid and readonly for Allysnapshot

9dcc7d9

chore(tools): add changeset

99ff953

adamjohnson requested changes Aug 20, 2026

View reviewed changes

Navigation Menu

Uh oh!

feat(text-input)!: port to `<pf-v6-text-input>` - #3160

feat(text-input)!: port to `<pf-v6-text-input>`#3160
zeroedin wants to merge 9 commits into
staging/pfv6from
feat/v6-text-input

zeroedin commented Aug 12, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Aug 12, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Aug 12, 2026 •

edited by github-actions Bot

Loading

Uh oh!

github-actions Bot commented Aug 12, 2026

Uh oh!

github-actions Bot commented Aug 12, 2026

Uh oh!

github-actions Bot commented Aug 12, 2026

Uh oh!

github-actions Bot commented Aug 12, 2026

Uh oh!

github-actions Bot commented Aug 18, 2026

Uh oh!

github-actions Bot commented Aug 20, 2026

Uh oh!

adamjohnson left a comment

Uh oh!

adamjohnson Aug 20, 2026

Uh oh!

adamjohnson Aug 20, 2026

Uh oh!

adamjohnson Aug 20, 2026

Uh oh!

adamjohnson Aug 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

zeroedin commented Aug 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

InternalsController fix (pfe-core)

Intentional divergences from React

Testing Instructions

Notes to Reviewers

Uh oh!

changeset-bot Bot commented Aug 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlify Bot commented Aug 12, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for patternfly-elements ready!

Uh oh!

github-actions Bot commented Aug 12, 2026

✅ Commitlint tests passed!

Uh oh!

github-actions Bot commented Aug 12, 2026

Uh oh!

github-actions Bot commented Aug 12, 2026

Uh oh!

github-actions Bot commented Aug 12, 2026

Uh oh!

github-actions Bot commented Aug 18, 2026

Uh oh!

github-actions Bot commented Aug 20, 2026

Uh oh!

adamjohnson left a comment

Choose a reason for hiding this comment

Uh oh!

adamjohnson Aug 20, 2026

Choose a reason for hiding this comment

Uh oh!

adamjohnson Aug 20, 2026

Choose a reason for hiding this comment

Uh oh!

adamjohnson Aug 20, 2026

Choose a reason for hiding this comment

Uh oh!

adamjohnson Aug 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

zeroedin commented Aug 12, 2026 •

edited

Loading

changeset-bot Bot commented Aug 12, 2026 •

edited

Loading

netlify Bot commented Aug 12, 2026 •

edited by github-actions Bot

Loading