Star Rating Feedback Contact Block for React

Nowhere yet. The submit handler waits 800 milliseconds as a stand-in for a request, then shows the confirmation, which says plainly that the note was saved in the demo only. Replace the timer in submit with your own call (an inbox, your roadmap tool, a form endpoint): details holds the rating, the topic ids and the message.

It is one control: click a star or use the arrow keys. Each star carries a spoken name such as "4 of 5, Good", and the word under the stars (from WORDS) is announced as it changes. The stars use your foreground colour rather than a gold one. Submitting without a rating asks for one and moves focus to the first star.

They are a multiple-choice Toggle Group, so any number can be on, arrow keys move between them and Space switches one. A chip that is on fills with your foreground colour, so the Shine Button stays the only primary control. Topics are optional; the confirmation says "with no topic picked" when none is on. Edit TOPICS for your own list.

Yes, on all seven targets. The Toggle Group's multiple-choice props are the one place the libraries differ in code (some take a type, React Aria takes a selection mode and keys); the visible result, the keyboard and the checks are the same.

The form has noValidate, so the block shows its own messages. problems asks for a rating and a non-empty message, each problem appears under its field with an icon and a described-by link, and typing or choosing clears it.

The shell narrows with the page, the chips wrap onto as many lines as they need, the stars keep their size and the button goes full width. Nothing scrolls sideways at 320 pixels.