Summary
Create `` to implement the PatternFly v6 Form select component.
Styled native select dropdown for simple single-selection form inputs.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
-- |
-- |
| cockpit |
-- |
-- |
| chickadee |
-- |
-- |
Notes
- Implement as a Form-Associated Custom Element (FACE) using `ElementInternals`
- Use ARIA IDL attributes for cross-root ARIA (Baseline 2025)
- Consider `referenceTarget` for label association (Chrome-only, progressive enhancement)
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with `@patternfly/react-core` FormSelect
- MUST participate in native form submission via FACE
- 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
- This is a styled native `` - not the custom floating Select; simpler and more accessible
React `validated`: `default`, `success`, `warning`, `error` - drives border/icon; `error` sets `aria-invalid`
React `isDisabled` - pass through to inner ``
- React `isIconSprite` - uses CSS background image for the chevron; verify v6 behavior
- React `FormSelectOption` and `FormSelectOptionGroup` - consider `` and `` sub-elements, OR allow slotting native `` / `` directly (preferred for simplicity)
- Custom styling of native `` is limited; use `appearance: none` + CSS arrow
Slotting native `` is the most composable approach and best for screen readers
Checklist
Implementation
[ ] API per `.claude/ADVICE.md`
[ ] CSS uses v6 tokens, logical properties, nesting
[ ] `@summary` and JSDoc on element class
[ ] `formAssociated = true` and `ElementInternals` for form participation
[ ] Form submission tested
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)
[ ] `a11ySnapshot` assertions
[ ] Form submission test
Reviews
[ ] `/review-api` passes
[ ] `/review-demos` passes
[ ] `/review-a11y` passes
[ ] `eslint` and `stylelint` pass
Ship
[ ] Add changeset
[ ] PR targets `staging/pfv6` (NOT `main`)
Summary
Create `` to implement the PatternFly v6 Form select component.
Styled native select dropdown for simple single-selection form inputs.
Prior Art
Notes
Requirements
Element-specific considerations