Summary
Create a <pf-v6-text-input-group> web component implementing the PatternFly v6 Text input group component.
Composed text input with utilities like search icon, clear button, and chip display for filter/tag inputs.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
<pf-v6-text-input-group> |
Exists |
| cockpit |
<pf-v6-text-input-group> |
Exists |
| chickadee |
-- |
-- |
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with
@patternfly/react-core TextInputGroup
- 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
isDisabled / isPlain props on wrapper
TextInputGroupMain: contains the actual <input>; props: icon, hint, type, value, onChange, aria-label
TextInputGroupUtilities: slot for labels/chips shown after the input (e.g. selected filter tags), plus clear button
- Input is FACE - use
formAssociated = true and ElementInternals for form participation
- Used as base for multi-select typeahead and chip-group filter patterns
- In v6, filter indicators use
pf-v6-label not chips (Label replaced Chip)
- Hint text renders inside input as ghost/placeholder-style text
- Icon slot or
icon attribute for leading icon (search, filter, etc.)
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create a
<pf-v6-text-input-group>web component implementing the PatternFly v6 Text input group component.Composed text input with utilities like search icon, clear button, and chip display for filter/tag inputs.
Prior Art
<pf-v6-text-input-group><pf-v6-text-input-group>Requirements
@patternfly/react-coreTextInputGroupElement-specific considerations
isDisabled/isPlainprops on wrapperTextInputGroupMain: contains the actual<input>; props:icon,hint,type,value,onChange,aria-labelTextInputGroupUtilities: slot for labels/chips shown after the input (e.g. selected filter tags), plus clear buttonformAssociated = trueandElementInternalsfor form participationpf-v6-labelnot chips (Label replaced Chip)iconattribute for leading icon (search, filter, etc.)Checklist
Implementation
formAssociated = trueElementInternalsfor value/validity reporting.claude/ADVICE.md@summaryand JSDoc on element classDemos
Tests
a11ySnapshotassertionsReviews
/review-apipasses/review-demospasses/review-a11ypasseseslintandstylelintpassShip
staging/pfv6(NOTmain)