IssueReporter

When to use

Use it to turn "this component is missing / this is broken / this could be better" into a complete issue draft that can be pasted straight into GitHub: a feedback entry point for a component library, a "report a problem" button in an internal platform, or a "this page is wrong" link in docs.

It is not a generic form: the field list comes from an issue template, not an arbitrary schema. Use ProForm for general data entry, ModalForm for create/edit dialogs, and MarkdownEditor when all you need is one Markdown input.

Import

Props

IssueReporterProps. IssueReporterModalProps extends it and adds the modal-only rows at the end.

Events

Slots

Accessibility

• Every field sits in a Field, so Base UI wires htmlFor/id, links the error text through aria-describedby, and sets aria-invalid automatically.
• Required errors appear only after a submit attempt, so the form never greets a first-time user with a wall of red.
• The too-long fallback explains itself through an Alert instead of silently disabling a button.
• The copy button swaps its label to "Copied" for 1.5 seconds; the change is textual, not icon-only, so screen readers announce it.
• Keyboard behavior for the two dropdowns comes from Select and Combobox.

Pitfalls

• It does not create the issue, and it must not receive a token. The component only hands back a draft and builds a prefill link. That link opens GitHub's own "new issue" form; the issue exists only after the user confirms it there. If you want one-click submission, take the draft to your own server and call the GitHub API from there, and never ship a PAT to the browser.
• Prefill links have a length ceiling. In practice a URL beyond roughly 8000 characters (GITHUB_URL_MAX_LENGTH) gets truncated by browsers, proxies, or mail clients, or is rejected outright. Past that the component does not render the "Open on GitHub" button and shows a notice plus "Copy Markdown" instead. The check measures the whole URL, not the body: percent-encoded CJK costs nine characters per glyph, so a long title alone can exhaust the budget.
• The related-component list must come from outside. The component never fetches llms.txt or the registry. The data source and its caching belong to the consumer, the same boundary ComponentPicker draws. Omit components and the field disappears.
• `control: "markdown"` pulls in tiptap. MarkdownEditor depends on @tiptap/*, which is not small. All three built-in templates deliberately use textarea; opt a field into markdown yourself when you need rich text.
• Do not wrap it in a `<form>` expecting native submit. The body deliberately renders no <form> element, because it has to nest inside ModalForm's form and nested forms are invalid HTML. Outside a dialog, use the built-in submit button or apiRef.submit().
• A template's `labels` and the component's `text` are different things. The former are GitHub labels (they land in draft.labels and the URL's labels parameter); the latter overrides UI copy.
• UI copy follows the locale by default. Without text, every string comes from the ConfigProvider locale and falls back to the built-in Chinese when no provider is present; modalTitle on IssueReporterModal works the same way. Priority is the text prop, then the locale, then the fallback. Note that the field `label` and `placeholder` of a template are not covered by the locale: they live in the templates data, so an English surface needs its own templates too.
• Switching templates keeps values of same-named fields. The value map is shared across templates, so if both bug and feature declare summary, its content survives the switch. That is intentional, so a mis-click does not destroy typed text. Call apiRef.reset() to clear.