shadcn.io is not affiliated with official shadcn/ui
Nomination Form Awards Block for Solid
A nomination form for an internal recognition programme: a category radio group, a searchable colleague list, a reason with a live character count and a confirmation that says it is only recorded in the demo.
Installation
Overview
A nomination form for Solid with Ark UI, split by a hairline that meets the page's top rule with a + mark. At the start, a compact header, the three steps from nomination to result as a numbered list joined by a thin line, and a band with the closing date. At the end, a real form: a category as a radio group of four cards, a colleague picked from a searchable list of eight in a Combobox, and a reason of up to 300 characters in a Textarea with a live count and the Shine Button to send. Submitting checks every field, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid nomination turns into a summary in the same space, which takes focus and says it is recorded in this demo only. The page's rails and top rule come from the Guides spine. It's built from Radio Group, Combobox, Textarea, Field, Shine Button, Button, Guides and your theme's tokens. The Lumengate Awards and the colleagues are made up for the example.
FAQ
Where does the nomination go?
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.
How does the form check what's entered?
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.
How does the colleague list work?
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 is an Ark collection filtered with a case-insensitive "contains".
How is the character count announced?
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.
What happens after sending?
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.