Examples
Full menu
Default multi-page flow: home menu with three cards (Share feedback, Report a bug, Inform direction), each leading to its own form.
Basic
basic=true skips the home menu and opens straight to the share
form. Use when the host page only needs the one flow.
Pre-filled email
Pass email="..." to pre-populate the email field. The research
opt-in still requires the user to check the box before the email is used.
Documentation
Props
Parameters accepted by
{#include components/extensions/user-feedback ... /}.
| Name | Type | Default | Description |
|---|---|---|---|
* id |
String | — | DOM id; trigger button + modal use derived ids. |
basic |
boolean | false |
Skip the home menu, open straight to the share form. The Back button collapses to Cancel. |
email |
String | — | Pre-fill the email field. Useful when the host has the user's email from their session. |
triggerLabel |
String | "Share your feedback" |
Trigger button text. |
Usage
Wiring submissions. The component dispatches a
pha:user-feedback-submit CustomEvent (and a
pha:user-feedback-cancel on close). The
detail is
{type, payload} where type is
one of share, bug,
research. Listen at the document level, POST to your server
with HTMX or fetch, then call markSuccess(title, message) or
markError() on the component via
$refs to update the modal page.
Default behaviour. When no host listener intervenes, the component auto-transitions to the success page 250ms after submit. This makes the demo self-contained; production wiring should preventDefault on the event and drive the page state explicitly.
Accessibility. The modal is
role="dialog" aria-modal="true" with
aria-labelledby bound to the current page's heading id. Cards
on the home menu are role="button" with full keyboard support
(Enter and Space). Email validation announces errors via the form's helper-text region.
Why not the React extension.
@patternfly/react-user-feedback is React-only. We vendor its
CSS at /web/vendor/patternfly-extensions/user-feedback.css and
re-implement the behaviour in Alpine.