Nomination Form Awards Block for React

Nowhere. The submit handler waits 800 milliseconds as a stand-in for a request, then shows the summary, which says plainly that it is recorded in this demo only. Replace that timer in submit with your own call (an inbox, a form endpoint or your recognition tool): details holds the category, the colleague and the reason.

The form has noValidate, so the browser's own bubbles stay away and the block shows its own. On submit, problems checks that a category is chosen, that a colleague was picked from the list (typing a name without choosing one doesn't count) and that the reason has at least 20 characters. Each problem appears under its field with an icon, the control gets aria-invalid and a description, and focus moves to the first one. Choosing or typing clears a field's message.

Type to filter the eight names and choose one with the pointer or the arrow keys and Enter; the clear button empties it. The list is COLLEAGUES at the top of the file, so swap in your own directory, or load it from your people API. The list filters itself as you type from the items you pass.

The visible count is hidden from assistive technology so a screen reader isn't interrupted at every key. A hidden status line speaks only at stages: twenty or fewer characters remain, ten or fewer, and none. The textarea stops at 300 characters.

The form turns into a summary in the same space, so the block keeps its height. The summary's heading takes focus and a status region announces it; it repeats the category, the colleague and the start of the reason. "Nominate someone else" brings back an empty form and puts focus on its heading.

No. The Lumengate Awards, the eight colleagues and the closing date are made up for the example, and Evander is a made-up suite. The date is written in the file, not computed, so it never goes stale on its own.