Summary
Create a <pf-v6-time-picker> web component implementing the PatternFly v6 Time picker component.
Time selection input with dropdown suggestions for 12-hour and 24-hour formats.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
-- |
-- |
| cockpit |
-- |
-- |
| chickadee |
-- |
-- |
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with
@patternfly/react-core TimePicker
- 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
- FACE:
formAssociated = true, ElementInternals - submits time string value
time / value prop (string, e.g. "2:00 AM" or "14:00")
is24Hour prop for format toggle
stepMinutes for dropdown suggestion interval (default 30)
minTime / maxTime to restrict valid range
placeholder for input hint text
- Text input with typed entry + time suggestions dropdown (combobox pattern)
- Combobox:
role="combobox", aria-expanded, aria-controls pointing to listbox
- Listbox:
role="listbox", options role="option", aria-selected
- Floating UI for dropdown positioning (consider
pf-v6-select as model)
- Validation: parse typed time, check against min/max, set
aria-invalid
- Keyboard: Arrow down opens suggestions, Arrow up/down navigates, Enter selects, Escape closes
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create a
<pf-v6-time-picker>web component implementing the PatternFly v6 Time picker component.Time selection input with dropdown suggestions for 12-hour and 24-hour formats.
Prior Art
Requirements
@patternfly/react-coreTimePickerElement-specific considerations
formAssociated = true,ElementInternals- submits time string valuetime/valueprop (string, e.g. "2:00 AM" or "14:00")is24Hourprop for format togglestepMinutesfor dropdown suggestion interval (default 30)minTime/maxTimeto restrict valid rangeplaceholderfor input hint textrole="combobox",aria-expanded,aria-controlspointing to listboxrole="listbox", optionsrole="option",aria-selectedpf-v6-selectas model)aria-invalidChecklist
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)