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 — 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 — intentional, so a mis-click does not destroy typed text. Call apiRef.reset() to clear.