shadcn.io is not affiliated with official shadcn/ui
Full Write Form Reviews Block for Vue
The whole review form on one page for a cast-iron pan: a named star rating, a title and text with live counts, pro and con tag lists, a recommend choice, photo names, and a sticky checklist with a progress bar.
Installation
Overview
A review form for Vue with Ark UI, for the Quoinby 26 cm skillet, a fictional cast-iron pan. A start-aligned header sits over one band split by a divider. At the start is the form: a star rating you can set with the arrow keys, each star named (Poor to Excellent) with the name shown on hover too, a title and a text with live counts (characters and words), a Pros list and a Cons list built as tag inputs, a "Would you recommend it" choice, and up to three photos. At the end, a sticky checklist shows what is still missing: four required items, a progress bar and one line of advice. Submitting checks every required field, writes each problem under its field and moves focus to the first one; a good form turns into a thanks that says nothing was sent and repeats the review. On a phone the checklist folds to one progress line above the Post review button. It's built from Rating, Field, Input, Textarea, Tags Input, Radio Group, File Upload, Progress, Guides and Shine Button, with your theme's tokens for every colour.
FAQ
Is the review sent anywhere?
No. A valid form turns into a thanks that says "Nothing was sent in this demo" and repeats what you wrote; "Write another review" brings back an empty form. To keep reviews, post draft to your own endpoint where submit says so, and show the thanks when it answers.
What happens to the photos?
Nothing is read or uploaded. The drop zone accepts up to three images of 5 MB each and lists only their names and sizes, each with a remove button; no thumbnail is drawn. A file that is not an image, is too big or would be a fourth is refused with a line saying which file and why. To store photos, send the File objects in draft.photos yourself and check them again on your server.
How does the checklist count?
Four things are required: a rating, a title, a text of 25 words or more, and an answer to "Would you recommend it". CHECKS lists them and isDone says whether each is met, so the progress bar, the count ("3 of 4 done"), the ticks and the advice line ("Next: a title.") all come from the same draft. Pros, cons and photos are optional and do not count.
How are mistakes shown?
On submit, each problem appears in a slot under its field (the slot is always there, so nothing jumps), the field is marked invalid, and focus goes to the first problem in reading order: the first star, the title, the text or the first choice. Editing a field clears its message. The error text is in the text colour with a red icon, never red text alone.